Блог

стек мерна, используя компонент класса, который я называю посадкой, я использую метод componentDidMount. при отправке формы axios использует метод get для возврата моего пользовательского объекта. Затем я удаляю свой пользовательский объект с помощью экспортированной функции в свой магазин. Получение этой ошибки: Действия должны быть обычными объектами. Вместо этого фактический тип был: «Обещание». Возможно, вам потребуется добавить промежуточное программное обеспечение в настройки магазина для обработки отправки других значений, таких как «redux-thunk» для обработки функций отправки. Я экспортирую компонент посадки по умолчанию, выполнив подключение и передав действие, которое я экспортировал, с последующим выполнением посадки. В index.js файл в настоящее время использует промежуточное программное обеспечение redux-thunk.

Моя цель-обновить состояние пользователя, чтобы все компоненты немедленно отображали изменяющееся содержимое в форме отправки.

App.js

 import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';

import { reducers } from './reducers';
import App from './components/App';


const store = createStore(reducers, {}, compose(applyMiddleware(thunk)));

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('root'),
);
 

Landing.js

 import React from 'react';
import { io } from 'socket.io-client';
import _ from 'underscore';
import { connect } from 'react-redux'

import './styles.css';
import { bid } from '../../actions/auction';
import { bidPlaced, loggedUser } from '../../api/index'; 
import { CONNECTION_PORT } from '../../config';




class Landing extends React.Component {

constructor(props) {
        super(props);
        this.state = {
             user: ''
        }
        componentDidMount() {
             this.setState({user: JSON.parse(localStorage.getItem('profile))}) //sets the logged in user to state 
        }
        handleFormSubmit = async (e) => { //This function is wrapped in tryCatch in my app
             e.preventDefault()
             //Storing user data in an object
             const userData = {email: this.state.user.result.email, id: this.state.user.result._id}
             const response = await loggedUser(userData)
             //which returns a promise, which does currently hold the updated userModel
             this.props.bid(response)
        }
        render (
             <div>
               <form onSubmit={handleFormSubmit}>
                     <input value={'all the user information'}>
                     <button type="submit">Click Me</button> 
               <form/>
        )
}

export default connect(null, { bid })(Landing);
 

в моем каталоге действий:
auction.js

 export const bid = async (user) => ({
    type: EDIT,
    data: user
});
 

редукторы
bid.js

 import * as actionType from '../constants/actionTypes';
let payload = null
if (localStorage.getItem('profile')) payload = localStorage.getItem('profile')

const bidReducer = (state = { authData: payload }, action) => {
    switch (action.type) {
        case actionType.EDIT:
            
            localStorage.setItem('profile', JSON.stringify({ ...action?.data }));

            return { ...state, authData: action.data, loading: false, errors: null };

        default:
            return state;
    }
};

export default bidReducer;
 

Просто удалите асинхронность в bid

 export const bid = (user) => ({
    type: EDIT,
    data: user
});