Question

我遇到了错误：

 Actions must be plain objects. Use custom middleware for async actions.

我已经在以下堆栈溢出问题中尝试了该解决方案，但是它没有用：
React-Redux: Actions must be plain objects. Use custom middleware for async actions

动作

export async function signupp(data){
    console.log('In signupp:');
    try{
        const request = await axios({
            method:'POST',
            url:'http://192.168.1.10:3003/users/signup',
            data:{
                email:data.email,
                password:data.password
            },
        }).then(response=>{
            console.log(response.data);
            return response.data
        }).catch( e => {
            console.log(e);
            return false
        }); 
        return {
            type:'signup',
            payload:request
        }
    }
    catch(e) {
        console.log(e);
        return false;  
    } 
}

减速器

export default function(state={},action){
    switch(action.type){
        case 'signup':
            return {
                ...state,
                auth:{
                    email: action.payload.email,
                    password:action.payload.password
                }
            }    
    }
}

商店

const createStoreWithMiddleware = applyMiddleware()(createStore);
const appRedux = () => (
    <Provider store = {createStoreWithMiddleware(reducers)}>
        <App/>
    </Provider>
)
AppRegistry.registerComponent(appName, () => appRedux);

顺便说一句，我在日志中得到了正确的答复。

Answer 1

在组件内部，在调用 signupp 函数的地方，您具有 mapDispatchToProps 函数作为react-redux lib中connect函数的回调，这是在后面做的诸如 dispatch（signupp（））之类的引擎盖（或者也许您是在没有react-redux lib的情况下直接进行分派）。根据redux API，此分派函数希望接收一个普通对象，但是您的signupp（）函数返回一个promise（因为内部有异步）。

要解决此问题，您可以简单地使用redux-thunk中间件。您还可以在redux docs部分中有关async actions的示例。

另一种解决方案是将获取逻辑移至组件，然后仅使用从请求中接收到的数据分派纯对象。

我收到此错误：操作必须是普通对象。使用自定义中间件进行异步操作

1 个答案: