2015-10-01 19 views
6

私のredux jsアプリ(google appengineバックエンド)では、ルートコンポーネントを含むページが開いたときに次の警告とエラーメッセージが表示されます。Uncaught TypeError:store.getStateが関数ではありません

警告:失敗しましたpropType:Providerに供給されるタイプfunctionの無効な小道具storeは、objectを期待しました。レンダリング方法がRootであることを確認します。 bundle.js:6169

警告:失敗しましたpropType:DevToolsWrapperに供給されるタイプfunctionの無効な小道具storeは、objectを期待。レンダリング方法がRootであることを確認します。 bundle.js:6169

警告:失敗したコンテキストタイプ:Providerに供給されるタイプfunctionの無効な子コンテキストstoreobjectを期待。レンダリング方法がRootであることを確認します。 bundle.js:6169

警告:失敗したコンテキストタイプ:Connect(AsyncApp)に供給されるタイプfunctionの無効なコンテキストstoreobjectを期待。レンダリング方法がProviderであることを確認します。

Uncaught TypeError: store.getState is not a function 

エラーが反応し、再来のlib /コンポーネント/ 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(店舗)は、これを返します。

ただし、Node backendを使用して同じコードを実行すると、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); 
} 

答えて

8

私の推測では、古いサンプルコードを実行しているです。 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); 
をしたいです
関連する問題