使用 redux thunk 时，操作必须是普通对象

Posted 2023-02-22

【中文标题】使用 redux thunk 时，操作必须是普通对象

【英文标题】：Actions must be plain objects while using redux thunk

【发布时间】：2017-11-28 10:09:56

【问题描述】：

我正在使用 Redux thunk 来调度多个操作。 我有一个 store.js 文件

// store.js
import rootReducer from '../reducers/setInitData'; // reducer file
import  applyMiddleware, createStore  from 'redux';
import thunk from 'redux-thunk';
const middleware = applyMiddleware(thunk);

export default createStore(rootReducer, middleware, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());

我有一个 app.js

import React from 'react';
import  render  from 'react-dom';
import   Provider   from 'react-redux';

import CampaignCreate  from './CampaignCreate' // component
import store from './store/store' // store.js

store.dispatch((dispatch) => 
   dispatch(
     type: 'SET_STATE',
     payload : 

     
   )
   dispatch(
       type : 'DISPLAY_REACT_COMPONENTS',
       payload : 
        dataLoadComplete : true
       
   )
);
render(
 <Provider store=store>
   <div id="campaign-init">
      <CampaignCreate />
   </div>
 </Provider>,
 document.getElementById('campaigns-react')
)

当我运行我的代码时，我在控制台中看到以下错误：

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

上面的代码出了什么问题？

【参考方案1】：

用redux devtools配置中间件不是正确的方法，根据redux devtools'readme，你应该这样做：

// don't forget import  compose  from 'redux'
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducer, composeEnhancers(middleware));