«Ошибка: нельзя вызывать store.getState () во время выполнения редуктора»

В моем случае мне нужно удалить composeWithDevTools - плагин для хрома

import { createStore, combineReducers, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import thunk from 'redux-thunk';

// const enhancer = composeWithDevTools(applyMiddleware(thunk))
const enhancer = applyMiddleware(thunk)

const store = createStore(reducers, enhancer);

У меня была такая же ошибка с сборкой PWA с полимером 3. Store.js также пытался использовать инструменты redux dev, которые мне пришлось деактивировать:

...
// Sets up a Chrome extension for time travel debugging.
// See https://github.com/zalmoxisus/redux-devtools-extension for more information.
//const devCompose = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const devCompose =  compose;

// Initializes the Redux store with a lazyReducerEnhancer (so that you can
// lazily add reducers after the store has been created) and redux-thunk (so
// that you can dispatch async actions). See the "Redux and state management"
// section of the wiki for more details:
// https://github.com/Polymer/pwa-starter-kit/wiki/4.-Redux-and-state-management
export const store = createStore(
  state => state,
  devCompose(
    lazyReducerEnhancer(combineReducers),
    applyMiddleware(thunk))
);
...

Это проблема с новый выпуск v2.16.0 для сокращение-devtools-расширение.

Вот парочка обходной путь пока ждем исправления ...

1. Вернуться назад до рабочей версии v2.15.5 (Для Chrome)

   • Скачать https://github.com/zalmoxisus/redux-devtools-extension/releases/download/2.15.5/extension.zip
   • Извлеките почтовый индекс
   • Введите chrome://extensions в URL-адрес и переключите developer mode на top right страницы.
   • Появится кнопка Load Unpacked. После нажатия кнопки выберите извлеченную папку.

2. Или просто сейчас запрещать ваш расширение redux-devtool.

   • либо на уровне браузера, либо через ваш код (где вы создаете хранилище redux)

К вашему сведению: это не решает вопрос OP, но решает проблему, когда разработчики получают следующее сообщение об ошибке, начиная с 27.11.18.

Error: You may not call store.getState() while the reducer is executing. The reducer has already received the state as an argument. Pass it down from the top reducer instead of reading it from the store.

ОБНОВИТЬ

v2.16.2 было выпущенный

Для тех, кто ранее отключал расширение, просто снова включите его и обновите инструменты разработки redux с 2.16.0 до 2.16.2 Обновите инструменты Redux Dev

В моем проекте. Эта проблема просто появляется из ниоткуда в один прекрасный день.

Мое решение: Отключите расширение Chrome - Redux Devtools. Потом все вернулось в норму.

Таким образом, с такой ошибкой вы должны протестировать в нескольких браузерах, чтобы найти проблему.

Вот что я сделал: просто прокомментировал строку для Chrome Redux Devtools Extension из моего файла store.js.

....

 const store = createStore(
  rootReducer,
  initialState,
  compose(
    applyMiddleware(...middleware)
   ///This line--> window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() 
  )
);

....

И вопрос только начался час назад. Как мы все знаем, расширение очень удобно во время разработки, так что давайте подождем реальных исправлений от властей.

Отключение расширения Chrome или удаление composeWithDevTool из вашего кода будет быстрым решением. Но все мы знаем, что нам нужно расширение, чтобы отслеживать состояние нашего приложения и правильно им управлять. Итак, я создал проблему сегодня, пожалуйста, поддержите, надеюсь, кто-то из команды redux свяжется с нами.

Или, если вы ищете временное решение (для Chrome), вы можете загрузить https://github.com/zalmoxisus/redux-devtools-extension/releases/download/2.15.5/extension.zip, а затем распаковать его в какую-нибудь папку.

Введите chrome: // extensions и включите режим разработчика в верхнем левом углу, затем нажмите «Загрузить распакованные» и выберите извлеченную папку для использования.

Проблема: https://github.com/reduxjs/redux-devtools/issues/413

Решение, которое работает для меня

Отключите расширение Chrome для Инструменты Redux Dev. или удалите регистратор из вашего кода.

Обновить: обновите инструменты разработки redux с 2.16.0 до 2.16.1 Обновите инструменты Redux Dev.

Должен быть исправлен сейчас. Обновите инструменты redux dev с 2.16.0 до 2.16.1

https://github.com/zalmoxisus/redux-devtools-extension/issues/588#issuecomment-442396540

В моем случае проблема не была связана с расширением dev. Я столкнулся с этой ошибкой при работе с глубокими ссылками - обновлял запрос маршрута внутри reducer. Логика переноса, связанная с манипулированием URL-адресом внутри settimeout, исправила ошибку.

У меня была эта проблема с Chrome. Понижение моей версии redux с 4.0.2 до 3.7.2 исправило это для меня.

npm uninstall redux

npm install [email protected]

tl; dr

Убедитесь, что у вас нет кода, вызывающего побочные эффекты в ваших редукторах!

Чистые редукторы

Редукторы Redux должны быть чистыми. Это означает, что у них не должно быть побочных эффектов. Побочные эффекты должны идти в саги или загадки. В моем случае редуктор выглядел так:

case REDIRECT_ON_EVENT: {
  history.push('/some-route'); // side effect: redirection
  return {
    ...state,
    path: action.payload.path,
  };
}

Часть history.push('/some-route'); испортила управление состоянием. Удаление его из редуктора и его размещение в саге, которая вызывается для того же типа действия, устранило проблему:

function redirectToSomeRoute() {
  history.push('/some-route');
}

takeEvery(REDIRECT_ON_EVENT, redirectToSomeRoute),

Note: I am using Saga

В моем случае я добавил код навигации внутри редуктора.

    sendOTPSuccess: (state, action) => {
      state.wip = false;

      RootNavigation.navigate('LoginOTPScreen');
    },

Вначале он работал, но когда я использовал / получал доступ к состоянию внутри вызванного нового экрана

import { useDispatch, useSelector } from "react-redux";
import * as sessionActions from "../../models/session";

const LoginOTP: () => Node = (props) => {
  const session = useSelector(sessionActions.selectSession);
  const dispatch = useDispatch();
  ...

выскочила ошибка.

“Error: You may not call store.getState() while the reducer is executing.”

Причина

Редуктор должен быть чистой функцией. Он должен принимать полезные данные и изменять состояние и ничего больше. Что-то еще считается побочным эффектом.

В моем случае я загрузил новый компонент, который также потребляет данные state, и изменение состояния еще не завершено. Это вызывает проблему.

Решение

Я просто переместил навигацию на соответствующий saga

// worker Saga:
function* sendOTPSaga({ payload }) {
  const { phoneNumber } = payload;
  try {
    const response = yield call(Api.sendOtp, { phoneNumber });
    if (response.status == 200) {
      yield put(sessionActions.sendOTPSuccess(response.data));
      RootNavigation.navigate('LoginOTPScreen'); // <---- Here
    ...