TypeError:将中间件添加到Redux时,getState不是函数

twi*_*lco 6 javascript middleware reactjs redux

在我的configureStore.dev.js文件中使用此代码,我Uncaught TypeError: getState is not a function在添加时得到了一个applyMiddleware(reduxImmutableStateInvariant).当我删除这个添加的中间件时,我的项目运行正常.添加此中间件的正确方法是什么?这是完整的文件:

import {createStore, compose, applyMiddleware} from 'redux';
import rootReducer from '../reducers';
import reduxImmutableStateInvariant from 'redux-immutable-state-invariant';

export default function configureStore(initialState) {
  const store = createStore(rootReducer, initialState, compose(
    // Add other middleware on this line...
    applyMiddleware(reduxImmutableStateInvariant),
    window.devToolsExtension ? window.devToolsExtension() : f => f // add support for Redux dev tools
    )
  );

  if (module.hot) {
    // Enable Webpack hot module replacement for reducers
    module.hot.accept('../reducers', () => {
      const nextReducer = require('../reducers').default; // eslint-disable-line global-require
      store.replaceReducer(nextReducer);
    });
  }

  return store;
}
Run Code Online (Sandbox Code Playgroud)

Cor*_*son 15

reduxImmutableStateInvariant是在将其传递给applyMiddleware之前需要调用的函数.

const store = createStore(rootReducer, initialState, compose(
        // Add other middleware on this line...
        applyMiddleware(reduxImmutableStateInvariant()),
        window.devToolsExtension ? window.devToolsExtension() : f => f // add support for Redux dev tools
    )
);
Run Code Online (Sandbox Code Playgroud)

文档在哪里?

在github README文档中,在导入后调用(通过require)reduxImmutableStateInvariant.见下面的第三行:

// Be sure to ONLY add this middleware in development!
const middleware = process.env.NODE_ENV !== 'production' ?
  [require('redux-immutable-state-invariant')(), thunk] :
  [thunk];

// Note passing middleware as the last argument to createStore requires redux@>=3.1.0
const store = createStore(
  reducer,
  applyMiddleware(...middleware)
);
Run Code Online (Sandbox Code Playgroud)

但是为什么thunk不是函数呢?

在thunk中间件中,thunk函数在返回之前调用.

const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;

export default thunk;
Run Code Online (Sandbox Code Playgroud)

那么为什么redux-immutable-state-invariant是一个函数呢?

根据代码,看起来你可以传入一个函数(isImmutable),用于确定redux状态中哪些属性是不可变的.我认为提供自己的isImmutable函数是允许这个中间件与其他不可变库很好地协作的原因.

export default function immutableStateInvariantMiddleware(isImmutable = isImmutableDefault) {
Run Code Online (Sandbox Code Playgroud)

这个方法在这里使用 https://github.com/leoasis/redux-immutable-state-invariant/blob/5ed542246e32b7eec06879b25e5a0a478daf4892/src/trackForMutations.js#L5