Loại không bắt buộcLỗi: store.getState không phải là chức năng

Question

Trong ứng dụng redux js của tôi (google appengine backend), tôi nhận được các cảnh báo và thông báo lỗi sau khi trang chứa thành phần Gốc được mở.

Cảnh báo: Không thành công propType: Không hợp lệ prop store loại function được cung cấp cho Provider, dự kiến ​​object. Kiểm tra phương thức hiển thị của Root. bundle.js: 6169

Cảnh báo: Không propType: prop không hợp lệ store loại function cung cấp cho DevToolsWrapper, dự kiến ​​object. Kiểm tra phương thức hiển thị của Root. bundle.js: 6169

Cảnh báo: Không loại Bối cảnh: không hợp lệ bối cảnh con store loại function cung cấp cho Provider, dự kiến ​​object. Kiểm tra phương thức hiển thị của Root. bundle.js: 6169

Cảnh báo: Không loại Bối cảnh: bối cảnh hợp lệ store loại function cung cấp cho Connect(AsyncApp), dự kiến ​​object. Kiểm tra phương thức hiển thị của Provider.

Uncaught TypeError: store.getState is not a function 

Đây là nơi xảy ra lỗi trong lib/components/createConnect.js của phản ứng-redux.

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

Tại điểm ngắt, ngay trước khi lỗi này xảy ra, console.log (lưu trữ) trả về điều này.

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

     var middlewareAPI = { 
     getState: store.… 

Tuy nhiên, khi tôi chạy chính mã tương tự bằng cách sử dụng nút phụ trợ, console.log (lưu trữ) trả về đối tượng này thay thế.

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

thành phần gốc của tôi và configureStore.js trông như thế này:

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

Answer 1

Tôi đoán là bạn đang chạy một mã số mẫu cũ. Có một số breaking change in Redux 2.0 compose() function API.

Thay vì

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

có thể bạn muốn

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