Redux：reducer 接收到的先前状态具有意外类型 "Function"

Question

当我为 chrome 扩展添加中间件时，减速器停止在现场正常工作（但 chrome/redux 调试工具工作）+ 我在控制台中收到以下错误：

The previous state received by the reducer has unexpected type of "Function". Expected argument to be an object with the following keys: "auth", "common", "home"

代码如下：

import { applyMiddleware, createStore } from 'redux';
import { promiseMiddleware, localStorageMiddleware } from './middleware';
import reducer from './reducer';

const middleware = applyMiddleware(promiseMiddleware, localStorageMiddleware);

const store = createStore(reducer, middleware,
      window.devToolsExtension ? window.devToolsExtension() : f => f);

export default store;

如果我删除 chrome 部分：

,window.devToolsExtension ? window.devToolsExtension() : f => f

如果再次正常工作。

Answer 1

createStore 最多接受 3 个参数。如果第二个参数是一个函数，它假定你的第二个参数是商店增强器。如果它是一个对象或存在 3 个参数，它假定该参数是您的初始状态。参见 here。

您的中间件变量是一个存储增强器，chrome 扩展也是一个增强器：

window.devToolsExtension ? window.devToolsExtension() : f => f

您必须将两者组合在一个函数中：

import { applyMiddleware, createStore, compose } from 'redux';
import { promiseMiddleware, localStorageMiddleware } from './middleware';
import reducer from './reducer';

const middleware = applyMiddleware(promiseMiddleware, localStorageMiddleware);

const store = createStore(
  reducer,
  compose(middleware, window.devToolsExtension ? window.devToolsExtension() : f => f)
);

export default store;

可找到相关文档 here。

Answer 2

createStore accepts the following arguments:

减速机
预加载状态
增强剂

如果只提供了两个参数并且第二个参数是一个函数，那么它被认为是一个增强器。在 source code.

中查看更多信息

如果你想使用 Redux devtools，那么你应该 compose 它作为一个额外的增强器。

    import { applyMiddleware, createStore, compose } from 'redux';

    const store = createStore(
      reducer,
      compose(
        middleware,
        window.devToolsExtension ? window.devToolsExtension() : f => f
      )
    )

希望对您有所帮助。波兹德拉夫

Redux：reducer 接收到的先前状态具有意外类型 "Function"

Redux: the previous state received by the reducer has unexpected type of "Function"

reactjs

redux

react-redux