reactjs - React-redux 错误“道具 `store` 在 `Root` 中被标记为必需，但它的值是 `undefined”

问题描述

我使用 react + redux，目前收到以下错误消息：

index.js:2178 Warning: Failed prop type: The prop `store` is marked as required in `Root`, but its value is `undefined`. 
in Root (at index.js:11)

index.js:2178 Warning: Failed prop type: The prop `store` is marked as required in `Provider`, but its value is `undefined`. 
in Provider (at Root.js:8)
in Root (at index.js:11)

index.js:2178 Warning: Failed child context type: The child context `store` is marked as required in `Provider`, but its value is `undefined`.
in Provider (at Root.js:8)
in Root (at index.js:11)

我已经根据这篇文章检查了我的出口/进口，但无法弄清楚出了什么问题......

我的 App.js 如下所示：

import React, { Component } from 'react';
import {BrowserRouter as Router, Route} from 'react-router-dom';
import { Provider } from 'react-redux'
import { createStore } from 'redux';
import rootReducer from './redux/rootReducer'
import Home from './pages/Home.js';

const store = createStore(rootReducer);
console.log(store.getState());

class App extends Component {
 render() {
  return (
   <Provider store={store}>
     <Router>
       <div>
        <Route exact path="/" component={Home}/>
       </div>
     </Router>
   </Provider >
  );
 }
}

export default App;

console.log 显示存储不是未定义的，而是在进入 Provider 之前处于其初始状态。当前应该使用此状态的组件如下（仍然缺少一些逻辑）：

import React, { Component } from 'react';
import { connect } from 'react-redux';

const mapStateToProps = (state) => {
  return {
  authStatus: state.authStatus
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    updateAuthStatus: (authStatus) => {
      dispatch({
        type: 'UPDATE_AUTHSTATUS',
        status: authStatus
      })
    }
  };
};

class LoginPopover extends Component{
    constructor() {
        super();
    }
    render() {
    console.log(authStatusChanged.authStatus);
    }
 }

export default connect(mapStateToProps, mapDispatchToProps)(LoginPopover);

我的减速器功能：

import { UPDATE_AUTHSTATUS } from './actions'


const initialState = {
  authStatus: ['unauthenticated'],
}

export const authStatusChanged = (state = initialState, action) => {
  switch (action.type) {
    case UPDATE_AUTHSTATUS:
    return Object.assign({}, state, {
      authStatus: action.status
    });

    default:
    return state;
  }
};

和 combineReducers

import { combineReducers } from 'redux';
import { authStatusChanged } from './reducers';

const rootReducer = combineReducers({
    authStatusChanged
});

export default rootReducer;

有任何想法吗？

标签： reactjsreduxreact-redux

您的 reducerauthStatusChanged仅处理状态的一部分authStatusChanged（或您传递给的任何名称combineReducers），并且由于它返回一个对象（例如{authStatus: ['unauthenticated']}），您的状态将如下所示：

state = {
    authStatusChanged: {
        authStatus: ['unauthenticated']
    }
}

因此，当您尝试访问中的状态时mapStateToProps，请这样做：state.authStatusChanged.authStatus而不是这样state.authStatus。

reactjs - React-redux 错误“道具 `store` 在 `Root` 中被标记为必需，但它的值是 `undefined”

问题描述

解决方案

推荐阅读