javascript - react - redux thunk

TypeError: getState no es una función cuando se agrega middleware a Redux

Question

Usando este código en mi archivo configureStore.dev.js, obtengo un Uncaught TypeError: getState is not a function cuando se agrega applyMiddleware(reduxImmutableStateInvariant) . Cuando elimino este middleware agregado, mi proyecto funciona bien. ¿Cuál es la forma correcta de agregar este middleware? Aquí está el archivo completo:

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

Answer 1

reduxImmutableStateInvariant es una función a la que debe llamar antes de pasarla a 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
    )
);

¿Dónde está esto en los documentos?

En los documentos README de github, se invoca después de importarse (a través de require) reduxImmutableStateInvariant . Ver la tercera línea, a continuación:

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

Aunque, ¿por qué no es una función thunk?

En el middleware thunk, se llama a la función thunk antes de que se devuelva .

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

export default thunk;

Entonces, ¿por qué la función de cambio de estado inmutable-invariante es una función?

Según el código, parece que puede pasar una función ( isImmutable ), que se usa para determinar qué propiedades en su estado redux son inmutables. Creo que proporcionar su propia función ismmmtable es lo que permite que este middleware funcione bien con otras bibliotecas inmutables.

export default function immutableStateInvariantMiddleware(isImmutable = isImmutableDefault) {

Ese método se usa aquí https://github.com/leoasis/redux-immutable-state-invariant/blob/5ed542246e32b7eec06879b25e5a0a478daf4892/src/trackForMutations.js#L5