React-redux error "Хранилище проп" помечено как обязательное в "Root", но его значение равно "undefined" - PullRequest
Новая
       7

React-redux error "Хранилище проп" помечено как обязательное в "Root", но его значение равно "undefined"

0 голосов
/ 08 мая 2018

Я использую response + 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;
  }
};

и объединить редукторы 

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

const rootReducer = combineReducers({
    authStatusChanged
});

export default rootReducer;

Есть идеи?

1 Ответ

0 голосов
/ 08 мая 2018

Ваш редуктор authStatusChanged обрабатывает только одну часть состояния, равную authStatusChanged (или какому-либо имени, которое вы передаете combineReducers), и, поскольку он возвращает объект (например, {authStatus: ['unauthenticated']}), ваше состояние будет выглядеть следующим образом это: 

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

Поэтому, когда вы пытаетесь получить доступ к состоянию в mapStateToProps, сделайте это так: state.authStatusChanged.authStatus, а не так state.authStatus.

...