TypeError:当向Redux添加中间件时,getState不是一个函数

TypeError: getState is not a function when adding middleware to Redux

本文关键字:函数 一个 getState Redux 当向 添加 中间件 TypeError      更新时间:2023-09-26

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

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;
}

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
    )
);

在文档的哪里?

在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)
);

为什么思维不是一个函数呢?

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

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

那么为什么redux不变状态不变是一个函数?

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

export default function immutableStateInvariantMiddleware(isImmutable = isImmutableDefault) {

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