"错误:错误:错误:错误:在执行reducer时,您可能无法调用store.getState()."

Question

我刚刚将我的全功能react-native应用程序升级到redux v4,但现在我收到以下错误:

错误:错误:错误:错误:在reducer执行时,您可能无法调用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版本的问题.

在我们等待修复时,这里有几个解决方法 ......

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的问题,但确实解决了开发人员从11/27/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.

UPDATE

v2.16.2已经发布

对于之前已禁用该扩展的用户,只需重新启用它并将您的redux dev工具从2.16.0 更新到2.16.2 更新Redux Dev工具

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

tl;dr

Make sure you don't have any code that causes side effects in your reducers!

Pure reducers

Redux reducers need to be pure. This means they shouldn't have side effects. Side effects should go to thunks or sagas. In my case a reducer looked like this:

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

The history.push('/some-route'); part messed up state management. Removing it from the reducer and placing it to a saga that gets called on the same action type fixed the issue:

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

takeEvery(REDIRECT_ON_EVENT, redirectToSomeRoute),

Answer 5

禁用Chrome扩展程序或composeWithDevTool从代码中删除可以作为快速修复.但我们都知道我们需要扩展以跟踪我们的应用程序状态并正确管理它.所以我今天创建了一个问题请希望,redux团队的人员会回复我们.

或者,如果您正在寻找临时解决方法(对于chrome),您可以下载https://github.com/zalmoxisus/redux-devtools-extension/releases/download/2.15.5/extension.zip然后将其解压缩到某些夹.

键入chrome:// extensions并从左上角打开开发人员模式,然后单击Load Unpacked并选择要使用的解压缩文件夹.

问题:https://github.com/reduxjs/redux-devtools/issues/413

Answer 6

解决方案对我有用

停用Redux Dev工具的Chrome扩展程序.或从您的代码中删除记录器.

更新:将您的redux dev工具从2.16.0 更新到2.16.1 更新Redux Dev工具.