关于reactjs：未捕获的TypeError：store.getState不是一个函数


Uncaught TypeError: store.getState is not a function

在我的redux js应用程序(google appengine后端)中，当包含Root组件的页面打开时，出现以下警告和错误消息。

警告：propType失败：类型无效的prop store提供给Provider的function，预期为object。检查Root .bundle.js的渲染方法：6169

警告：propType失败：为DevToolsWrapper提供了类型为function的无效道具store，预期为object。检查Root .bundle.js的渲染方法：6169

警告：失败的上下文类型：提供给Provider的类型为function的无效子上下文store，预期为object。检查Root .bundle.js的渲染方法：6169

警告：失败的上下文类型：提供给Connect(AsyncApp)的类型为function的无效上下文store，预期为object。检查Provider的渲染方法。

1
Uncaught TypeError: store.getState is not a function

这是在react-redux \\的lib / components / createConnect.js中发生错误的地方。

1
2
3
4
5
6
7
    function computeStateProps(store, props) {
      var state = store.getState();  <<<<< The error occurs here.
      var stateProps = shouldUpdateStateProps ? finalMapStateToProps(state, props) : finalMapStateToProps(state);

      _invariant2['default'](_utilsIsPlainObject2['default'](stateProps), '`mapStateToProps` must return an object. Instead received %s.', stateProps);
      return stateProps;
    }

在

1
2
3
4
5
6
7
function (reducer, initialState) {
      var store = next(reducer, initialState);
      var _dispatch = store.dispatch;
      var chain = [];

      var middlewareAPI = {
        getState: store.…

，但是，当我使用Node后端运行完全相同的代码时，console.log(store)返回此对象。

1
2
3
4
5
6
devToolsStore: Object
dispatch: (action)
getReducer: getReducer()
getState: getState()
replaceReducer: replaceReducer(nextReducer)
subscribe: subscribe(listener)

我的根组件和configureStore.js看起来像这样：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import React, { Component } from 'react';
import { Provider } from 'react-redux';
import configureStore from '../store/configureStore';

import { createStore, applyMiddleware, combineReducers, compose } from 'redux';
import { DevTools, DebugPanel, LogMonitor } from 'redux-devtools/lib/react';


import AsyncApp from './AsyncApp';

const store = configureStore();

export default class Root extends Component {
  render() {
return (
 
  <Provider store={store}>
    {() => <AsyncApp />}
  </Provider>
  <DebugPanel top right bottom>
    <DevTools store={store} monitor={LogMonitor} />
  </DebugPanel>

);
}
}

configureStore.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { createStore, applyMiddleware, combineReducers, compose } from"redux";
import thunkMiddleware from"redux-thunk";
import loggerMiddleware from"redux-logger";
import rootReducer from"../reducers";
import thunk from 'redux-thunk';
import { devTools, persistState } from 'redux-devtools';

const finalCreateStore = compose(
    applyMiddleware(thunkMiddleware),
    devTools(),
    persistState(window.location.href.match(/[?&]debug_session=([^&]+)\\b/)),
    createStore
);

export default function configureStore(initialState) {
  return finalCreateStore(rootReducer, initialState);
}

我的猜测是您正在运行旧的示例代码。 Redux 2.0 compose()函数API中发生了重大变化。

您可能想要的不是

1
2
3
4
5
6
const finalCreateStore = compose(
    applyMiddleware(thunkMiddleware),
    devTools(),
    persistState(window.location.href.match(/[?&]debug_session=([^&]+)\\b/)),
    createStore
);

，而

1
2
3
4
5
const finalCreateStore = compose(
    applyMiddleware(thunkMiddleware),
    devTools(),
    persistState(window.location.href.match(/[?&]debug_session=([^&]+)\\b/))
)(createStore);