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ở.Loại không bắt buộcLỗi: store.getState không phải là chức năng
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);
}