未捕获的 TypeError：store.getState 不是函数答案

【问题标题】：Uncaught TypeError: store.getState is not a function未捕获的 TypeError：store.getState 不是函数
【发布时间】：2015-12-29 00:51:47
【问题描述】：

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

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

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

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

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

Uncaught TypeError: store.getState is not a function

这是 react-redux 的 lib/components/createConnect.js 中出现错误的地方。

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

在断点处，就在此错误发生之前，console.log(store) 返回 this。

function (reducer, initialState) {
      var store = next(reducer, initialState);
      var _dispatch = store.dispatch;
      var chain = [];

      var middlewareAPI = {
        getState: store.…

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

devToolsStore: Object
dispatch: (action)
getReducer: getReducer()
getState: getState()
replaceReducer: replaceReducer(nextReducer)
subscribe: subscribe(listener)

我的根组件和 configureStore.js 如下所示：

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 (
 <div>
  <Provider store={store}>
    {() => <AsyncApp />}
  </Provider>
  <DebugPanel top right bottom>
    <DevTools store={store} monitor={LogMonitor} />
  </DebugPanel>
</div>
);
}
}

configureStore.js

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

【问题讨论】：

标签： reactjs redux

【解决方案1】：

我的猜测是您正在运行较旧的示例代码。有一个breaking change in Redux 2.0 compose() function API。

代替

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

你可能想要

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

【讨论】：