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

Posted 2023-02-22

【中文标题】Redux 错误操作必须是普通对象。使用自定义中间件进行异步操作

【英文标题】：Redux Error Actions must be plain objects. Use custom middleware for async actions

【发布时间】：2019-12-26 09:19:58

【问题描述】：

我是 redux 的新手，我遇到了一个错误，在调度一个操作时我遇到了错误

“动作必须是普通对象。使用自定义中间件进行异步动作。”，我检查了流程但看不到任何问题，下面是代码“

我的 JS 容器文件：

import React from 'react'
import Redirect from 'react-router-dom'
import * as actions from './../store/actions/index'
import  connect  from 'react-redux'

class home extends React.Component

constructor(props)
    super(props);
    this.state=
        isClk:false
    



performLogout = (evt)=> 
    evt.preventDefault();
    this.props.onLogout();
    this.setState(isClk: true)
;

render()

    let redirect=null;

    if (this.state.isClk)
        redirect=<Redirect to="/login"/>
    
    return(

        <div>
            redirect
            <h1>In Home</h1>
            <button onClick=this.performLogout>Logout</button>
        </div>
    )




  const mapDispatchToProps = dispatch =>
     return 
      onLogout: () => dispatch(actions.logout())
    
  ;

 export default connect(null,mapDispatchToProps)(home)

Index.js：

   export 
auth,
logout
 from './auth'

动作（auth.js）：

export const logout =()=>
 return(
    actionTypes.AUTH_LOGOUT
 )
;

减速器：

  const authLogout=(state,action)=>
     return updateObject(state,
         token:null,
         loading:false,
         error:null
    )
   ;

 const reducer=(state=initialState,action)=>

 switch(action.type)
    case actionTypes.AUTH_FAIL: return authFail(state,action);
    case actionTypes.AUTH_LOGOUT: return authLogout(state,action);
    default:
        return state
  

 ;

商店：

       import Provider from 'react-redux'
       import  createStore, applyMiddleware, compose, combineReducers  from 'redux'
       import BrowserRouter from "react-router-dom";
       import authReducer from './Containers/store/reducers/auth'
       import thunk from 'redux-thunk';

       const composeEnhancers = compose;

       const RootReducer=combineReducers(
              auth:authReducer
       );

       const store=createStore(RootReducer,composeEnhancers(applyMiddleware(thunk)));

       const app = (
                      <Provider store=store>
                     <BrowserRouter>
                       <App />
                     </BrowserRouter>
                      </Provider>
                  );

ReactDOM.render(app, document.getElementById('root'));

我想在用户单击注销按钮时执行注销操作，我可以找到问题所在，我的商店是否已正确初始化或 thunk 中的任何问题？或者其他可能在派遣时，请指导？

【问题讨论】：

抱歉，我看不到您的“注销”操作。看起来你的操作只是返回一个字符串类型还是我错了？

【参考方案1】：

您的动作创建者应该返回一个具有类型的对象，目前您只返回字符串常量。

// Actions(auth.js):

export const logout =()=>
 return 
    type: actionTypes.AUTH_LOGOUT,
 ;
;

【讨论】：

谢谢，终于明白了：）

【参考方案2】：

Redux 中的动作需要是普通对象，所以你需要像下面这样添加一个对象

export const logout = () => (
    type: actionTypes.AUTH_LOGOUT
);

【讨论】：

谢谢，现在知道了:)