Redux - mapStateToProps не работает

Question

У меня есть компонент реагирования, который выполняет AJAX-вызов в componentWillMount и поддерживает данные, полученные в ответ на хранилище с избыточностью.Вот код

componentWillMount() {
  var self = this;
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState === 4 && this.status === 200) {
      console.log(this.responseText);
      var json = JSON.parse(this.responseText);
      var data = {
        json
      };
      self.props.dispatch({
        type: "ADD_Exams",
        data
      });
    }
  };
  xmlhttp.open("GET", "http://127.0.0.1:8000/getExams/", true);
  xmlhttp.send();
}

В редукторе я назначаю полученные данные в действии массиву, определенному в состоянии редуктора.

const initialState = {
  exams:[]    
}

const examreducer = (state = initialState, action) => {
  switch (action.type) {
    case "ADD_Exams":
      return {
        ...state,
        exams: [...state.exams, action.data.json]
      };
    default:
      return state;
  }
};

Но когда я использую mapStateToProps для чтения экзаменовЯ получаю неопределенную переменную.

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

export default connect(mapStateToProps)(Exam); 

Я создаю хранилище, подобное этому

import { Provider } from "react-redux";
const store = createStore(loginReducer, examReducer);
ReactDOM.render(
  <Provider store={store}>
    <Exam />
  </Provider>,
  document.getElementById("root")
);

registerServiceWorker();

console.log (this.props.exams) печатает неопределенное.В чем здесь проблема?

Answer 1

Я думаю, что есть проблема в том, как вы извлекаете данные или инициализируете хранилище.Попробуйте это:

import { createStore, combineReducers } from 'redux'
import loginReducer from '../path';
import examReducer from '../path';

const rootStore = combineReducers({
  loginReducer,
  examReducer
})

const store = createStore(rootReducer);

ReactDOM.render(
  <Provider store={store}>
    <Exam />
  </Provider>,
  document.getElementById("root")
);

, а затем:

const mapStateToProps = (state) => {
    return {
        exams: state.examReducer.exams
    }
}

Answer 2

Можете ли вы отредактировать свой mapStateToProps таким образом, чтобы увидеть фактическое содержание вашего состояния?

const mapStateToProps = (state) => {
   console.log(state);
    return {
        exams: state.exams
    }
}

Я подозреваю, что ваш редуктор не в корне ваших редукторов.Если это так, вам может потребоваться сделать state.examreducer.exams.Кроме того, ваш компонент упакован в Provider?Он нужен вам для доступа к контексту (через который доступно ваше состояние).

ОБНОВЛЕНИЕ

Обязательно инициализируйте хранилище перед рендерингом любого компонента React.

import React from 'react'
import ReactDOM from 'react-dom'
import { createStore, combineReducers } from 'redux';
import { Provider } from 'react-redux';

const store = createStore(combineReducers({loginReducer, examReducer}), {loginReducer:{}, examReducer:{}});
ReactDOM.render(
  <Provider store={store}>
    <Exam />
  </Provider>,
  document.getElementById('root')
)

Затем обновите mapStateToProps:

const mapStateToProps = (state) => {
    return {
        exams: state.examReducer.exams || []
    }
}