动作必须是普通对象。 Redux 不工作

Posted 2023-02-22

【中文标题】动作必须是普通对象。 Redux 不工作

【英文标题】：Actions must be plain objects. Redux not working

【发布时间】：2019-04-26 21:39:33

【问题描述】：

我正在尝试添加 redux-thunk 中间件以将注册和登录功能放入我的应用程序中。但是代码似乎不适用于注册。它给出了以下错误 -

动作必须是普通对象。使用自定义中间件进行异步操作。

代码如下

Index.js - 导入 thunk 并使用它

 import createStore, applyMiddleware from 'redux';
 import thunk from 'redux-thunk';
 const store = createStore(authReducer,applyMiddleware(
                            thunk, 
                            loggerMiddleware
                            ),window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());

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

actions/authActions.js - 创建注册函数来调度动作

export function register()
    return (dispatch)=>

        dispatch(type:'auth_user')

    

components/Register.js - 使用上述redux注册功能的组件

import  * as actions  from '../actions/authActions';

class RegisterForm extends React.Component

handleRegister = (e)=>
    e.preventDefault();
    console.log("inside handle register");
    console.log(this.props);
    this.props.register();
 

var Register = connect(mapStateToProps,actions)(RegisterForm);

authReducer.js

import AUTH_ERROR,UNAUTH_USER,FETCH_MESSAGE, AUTH_USER from '../actions/types';


const initialState = 
    loggedIn:false,
    errorMessage:''


const   authReducer = (state=initialState,action)=>
    console.log("action is")
    console.log(action);
    switch(action.type)
        case AUTH_USER:
            
                console.log("Reached in reducer");
                return ...state,loggedIn:true

        case UNAUTH_USER:
            return ...state, loggedIn:false
        default:
            return state;
    



export default authReducer;

/action/types.js

export const AUTH_USER = 'auth_user'
export const UNAUTH_USER = 'unauth_user'
export const AUTH_ERROR = 'auth_error'
export const FETCH_MESSAGE = 'fetch_message'

【问题讨论】：

您的商店设置错误。

你能告诉我出了什么问题吗？以及如何纠正它。

【参考方案1】：

您的商店设置似乎不正确。将您的商店写为：

import  createStore, applyMiddleware, compose  from 'redux';
import thunk from 'redux-thunk';

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
  authReducer,
  ,
  composeEnhancers(
    applyMiddleware(
      thunk,
      loggerMiddleware
    )
  )
);

【讨论】：

您好 Arup，这正在消除错误，但该操作不会进入 Reducer。你能帮忙吗？

@AbhishekKulshrestha 该操作是否在执行任何异步调用？如果没有，则无需执行return (dispatch)=> .

将来它会进行异步调用，但现在我只是检查这段代码。如果可行，我会将异步代码放入其中。

当它是异步调用时，那么只这样写，直到那时像非异步动作创建者一样写动作..

【参考方案2】：

你可以在actions中尝试以下sn-p吗？

export function register=()=>
    return 
        type:'auth_user'