react-redux异步action报错Actions must be plain objects如何解决

报错原因 #

Redux 原生仅支持派发普通对象类型的action，你当前定义的fetchPublicDisplays是返回函数的异步action，没有配置对应的中间件处理时，Redux 会直接接收到返回的函数而非普通action对象，因此触发Actions must be plain objects报错。
另外你的代码还存在一处隐藏问题：mapStateToProps中读取状态的key拼写错误，将displays写为了deisplays，即便异步逻辑跑通也无法正确拿到状态数据。

解决步骤 #

• 安装redux-thunk中间件，用于处理返回函数的异步action

npm install redux-thunk
# 或使用yarn
yarn add redux-thunk

• 在Redux store的配置文件中注册thunk中间件，示例代码如下：

import { createStore, applyMiddleware, combineReducers } from 'redux';
import thunk from 'redux-thunk';
import displayReducer from './reducers/displayReducer';

const rootReducer = combineReducers({
  // 这里的key要和mapStateToProps中读取的key保持一致
  displays: displayReducer
});

// 注册中间件到store
const store = createStore(rootReducer, applyMiddleware(thunk));
export default store;

• 修复mapStateToProps中的拼写错误：

const mapStateToProps = state => {
    return { displays: state.displays };
};

注意：请确认FETCH_PUBLIC_DISPLAYS常量在action、reducer文件中都已正确导入，没有拼写错误。

内容的提问来源于stack exchange，提问作者kakakakakakakk