Redux: предыдущее состояние, полученное редуктором, имеет неожиданный тип "Функция",

Когда я добавляю промежуточное программное обеспечение для расширения chrome, редукторы перестают нормально работать на сайте (но работает инструмент отладки chrome/redux) + Я получаю следующую ошибку в консоли:

Предыдущее состояние, получаемое редуктором, имеет неожиданный тип "Функция". Ожидаемый аргумент - объект со следующими ключами: "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;

Если я удаляю хромную часть:

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

Если снова работает нормально.

Ответ 1

createStore принимает до 3 аргументов. Если второй аргумент - это функция, он предполагает, что ваш второй аргумент является усилителем хранилища. Если это объект или есть 3 аргумента, он предполагает, что аргумент является вашим начальным состоянием. См. здесь.

Ваша промежуточная переменная является усилителем хранилища, а расширение хром также является энхансером:

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;

Документация для этого можно найти здесь.

Ответ 2

createStore принимает следующие аргументы:

Редуктор
предварительно загруженное состояние
энхансер

Если заданы только два аргумента, а второй аргумент - функция, то он считается энхансером. Подробнее см. В исходном коде.

Если вы хотите использовать Redux devtools, вы должны compose использовать его как дополнительный усилитель.

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

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

Надеюсь, что это поможет. Поздрав 😉