reactjs - reducer - redux form

Redux: el estado anterior recibido por el reductor tiene un tipo inesperado de "Función"

Question

Cuando agrego middleware para la extensión de Chrome, los reductores dejan de funcionar correctamente en el sitio (pero la herramienta de depuración Chrome / Redux funciona) + Recibo el siguiente error en la consola

El estado anterior recibido por el reductor tiene un tipo inesperado de "Función". Se espera que el argumento sea un objeto con las siguientes claves: "auth", "common", "home"

Aquí está el código:

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;

Si quito parte de cromo:

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

Si funciona de nuevo normal.

Answer 1

createStore here :

• reductor
• estado precargado
• potenciador

Si solo se proporcionan dos argumentos y el segundo argumento es una función, entonces se considera un potenciador. Ver más en el código fuente .

Si desea utilizar los dispositivos de redux, debe compose como un potenciador adicional.

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

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

Espero que ayude. Pozdrav 😉

Answer 2

createStore toma hasta 3 argumentos. Si el segundo argumento es una función, se supone que su segundo argumento es el mejorador de la tienda. Si es un objeto o hay 3 argumentos presentes, se supone que el argumento es su estado inicial . Ver here

Su variable de middleware es un potenciador de la tienda y la extensión de Chrome también es un potenciador:

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

Tienes que componer ambas en una sola función:

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;

La documentación para esto se puede encontrar here .