Question

我刚刚将功能齐全的react-native应用程序升级到redux v4，但现在出现以下错误：

错误：错误：错误：错误：减速器执行时，您可能无法调用store.getState（）。减速器已经接收到该状态作为参数。从顶部减速器将其传递下来，而不是从商店中读取。

我怀疑问题是我内部有很多组件，每个组件都有自己的connect(mapStateToProps, mapDispatchToProps)(Component)，我认为这不是实现它的正确方法，尽管我不确定这样做的正确方法

非常感谢任何方向！

堆栈跟踪：

    This error is located at:
    in Connect(SideBarApp) (at SceneView.js:9)
    in SceneView (at createTabNavigator.js:10)
    in RCTView (at View.js:43)
    in RCTView (at View.js:43)
    in ResourceSavingScene (at createBottomTabNavigator.js:86)
    in RCTView (at View.js:43)
    in RCTView (at View.js:43)
    in TabNavigationView (at createTabNavigator.js:127)
    in NavigationView (at createNavigator.js:59)
    in Navigator (at createNavigationContainer.js:376)
    in NavigationContainer (at SceneView.js:9)
    in SceneView (at SwitchView.js:12)
    in SwitchView (at createNavigator.js:59)
    in Navigator (at createNavigationContainer.js:376)
    in NavigationContainer (at AppNavigator.js:36)
    in App (created by Connect(App))
    in Connect(App) (at index.ios.js:23)
    in Provider (at index.ios.js:22)
    in TheNewsApp (at renderApplication.js:32)
    in RCTView (at View.js:43)
    in RCTView (at View.js:43)
    in AppContainer (at renderApplication.js:31)

This error is located at:
    in NavigationContainer (at SceneView.js:9)
    in SceneView (at SwitchView.js:12)
    in SwitchView (at createNavigator.js:59)
    in Navigator (at createNavigationContainer.js:376)
    in NavigationContainer (at AppNavigator.js:36)
    in App (created by Connect(App))
    in Connect(App) (at index.ios.js:23)
    in Provider (at index.ios.js:22)
    in TheNewsApp (at renderApplication.js:32)
    in RCTView (at View.js:43)
    in RCTView (at View.js:43)
    in AppContainer (at renderApplication.js:31)

This error is located at:
    in NavigationContainer (at AppNavigator.js:36)
    in App (created by Connect(App))
    in Connect(App) (at index.ios.js:23)
    in Provider (at index.ios.js:22)
    in TheNewsApp (at renderApplication.js:32)
    in RCTView (at View.js:43)
    in RCTView (at View.js:43)
    in AppContainer (at renderApplication.js:31)
getState@http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:79579:24
runComponentSelector@http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:78896:56
initSelector@http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:79019:28
Connect(SideBarApp)@http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:78969:29
constructClassInstance@http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:20826:32
updateClassComponent@http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:22393:35
performUnitOfWork@http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:24922:27
workLoop@http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:24955:47
renderRoot@http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:24988:21
performWorkOnRoot@http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:25549:23
performWork@http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:25481:30
performSyncWork@http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:25456:20
requestWork@http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:25362:26
scheduleWork@http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:25224:28
enqueueSetState@http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:20681:23
setState@http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:2380:37
dispatch@http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:80901:27
navigate@http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:80517:24
nav@http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:80470:44
combination@http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:79810:38
dispatch@http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:79628:38
setLoginStatus@http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:112247:19
http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:112199:44
tryCallOne@http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:8818:16
http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:8919:27
_callTimer@http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:8162:17
_callImmediatesPass@http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:8198:19
callImmediates@http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:8417:33
__callImmediates@http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:7741:32
http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:7580:34
__guard@http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:7721:15
flushedQueue@http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:7579:21
flushedQueue@[native code]
invokeCallbackAndReturnFlushedQueue@[native code]

Answer 1

这是 redux-devtools-extension 的新v2.16.0版本的问题。

有几个解决方法，我们在等待修复...

还原到工作版本v2.15.5（对于Chrome ）
- 下载https://github.com/zalmoxisus/redux-devtools-extension/releases/download/2.15.5/extension.zip
- 提取拉链
- 在网址中输入chrome://extensions，然后在页面developer mode上打开top right。
- 将显示按钮Load Unpacked。单击按钮后，选择提取的文件夹。
或者暂时禁用您的 redux-devtool扩展。
- 在浏览器级别或通过代码（在其中创建redux存储的地方）

仅供参考：这不能解决OP的问题，但可以解决开发人员从18年11月27日开始收到以下错误消息的问题。

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 已被released

对于以前禁用了扩展程序的用户，只需重新启用扩展程序并将redux开发工具从2.16.0升级到2.16.2 Update Redux Dev tools

Answer 2

就我而言，我必须删除composeWithDevTools-chrome插件

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

Answer 3

在我的项目中。这个问题只是一天之内突然出现。

我的解决方案：禁用Chrome扩展程序-Redux Devtools。 然后一切恢复正常。

因此，由于出现此类错误，您应该在多个浏览器中进行测试以发现问题。

Answer 4

禁用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

Answer 5

对我有用的解决方案

禁用 Redux Dev工具的Chrome扩展程序。或从代码中删除 logger 。

更新：将您的redux开发工具从2.16.0更新到2.16.1 Update Redux Dev tools。

Answer 6

当我使用redux-thunk，react-native-router-flux时，我也有同样的错误，我可以通过在reducer中添加超时来解决它。

setTimeout(()=>{
                Actions.main();
                return state;
            },1)

Answer 7

使用聚合物3进行PWA构建时，我有同样的错误。 store.js还尝试使用必须停用的redux开发工具：

.lib

Answer 8

这就是我的工作：刚刚从store.js文件中注释了Chrome Redux Devtools Extension行。

....

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

....

问题是一个小时前才开始的。众所周知，扩展在开发过程中非常方便，因此，让我们等待权威机构的实际修复。

Answer 9

现在应该修复。将您的redux开发工具从2.16.0更新到2.16.1

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

Answer 10

tl;博士

确保您的减速器中没有任何导致副作用的代码！

纯减速器

Redux 减速器需要是纯的。这意味着它们不应该有副作用。副作用应该去 thunks 或 sagas。在我的例子中，一个减速器看起来像这样：

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

history.push('/some-route'); 部分搞砸了状态管理。将其从减速器中移除并将其放置到在相同动作类型上调用的 saga 解决了该问题：

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

takeEvery(REDIRECT_ON_EVENT, redirectToSomeRoute),

Answer 11

就我而言，该问题与开发人员扩展无关。我在使用深层链接时遇到了此错误-在reducer中更新路由查询。与在settimeout内部处理url相关的包装逻辑可修复该错误。

Answer 12

我在Chrome上遇到了这个问题。将我的redux版本从4.0.2降级到3.7.2已为我修复。

npm uninstall redux

npm install redux@3.7.2

Answer 13

<块引用>

注意：我正在使用 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.”

原因

Reducer 应该是一个纯函数。它应该接受有效载荷并修改状态而不是其他任何东西。其他一些东西被视为副作用。

我的情况是我加载了一个新组件，该组件也消耗 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
    ...

“错误：错误：错误：错误：减速器执行时，您可能无法调用store.getState（）。”

13 个答案:

这是 redux-devtools-extension 的新v2.16.0版本的问题。

更新

tl;博士

纯减速器

原因

解决方案