действие обновляет состояние, но реквизиты из mapStateToProps отображаются как неопределенные в компоненте

Question

Я пишу простое приложение для оценки с несколькими вариантами ответов, которое позволяет щелкнуть ответ, где он затем выделяется и добавляется в массив ответов. Другие варианты выбираются из массива ответов, если пользователь уже нажал на них. Действие отправляется правильно, но реквизиты, которые я использую в компоненте, отображаются как неопределенные. Я уверен, что я слишком усложнил это (я довольно новичок), поэтому любая помощь приветствуется. Я просмотрел около 7 других SO сообщений, но установка отличается, и они не включают несколько элементов в mapStateToProps и mapDispatchToProps (не уверен, если это имеет значение.)

question.reducer. js

const INITIAL_STATE=
{
  answers:[],
  i:1,
  j:2,
  k:3,
  l:4,
  i_Checked:"",
  j_Checked:"",
  k_Checked:"",
  l_Checked:""
};
const questionReducer=(state=INITIAL_STATE,action)=>{
  switch(action.type){
case QuestionActionTypes.CLICK_I:
return{
  ...state,
  answers: changeI(state.i,state.j,state.k,state.l,state.answers),
  i_Checked:"checked",
  j_Checked:"",
  k_Checked:"",
  l_Checked:""
};

«changeI» в редукторе - это утилита из моей утилиты. js папка, которая присваивает правильному div имя_класса «флажок» и добавляет его в массив ответов, если он не включен убирая другие варианты множественного выбора из массива ответов. Это все работает просто отлично. Это реквизит от mapStateToProps сводит меня с ума!

рассматриваемый компонент

import React from 'react';
import './multiple-choice.styles.scss';
import {connect} from 'react-redux';
import {i_Clicked,j_Clicked,k_Clicked,l_Clicked} from '../../redux/question/question.actions';

const MultipleChoice= ({i_Checked,j_Checked, k_Checked, l_Checked, i_Clicked,j_Clicked,k_Clicked,l_Clicked,i,j,k,l})=>{

    let answerUrl="../../../public/images/answer";
  let formVisible="none";
  let mcVisible="";


  return(

  <div  style={{display: mcVisible}}>
        <div className='row'>
        //answer choice 1
        <div onClick={i_Clicked} className={`${i_Checked} column`} >
          <img alt="Possible Answer" src={`${answerUrl}${i}.png`}/>
         </div>

//answer choice 2
        <div onClick={j_Clicked} className={`${j_Checked} column`}>
          <img alt="Possible Answer" src={`${answerUrl}${j}.png`}/>
         </div>
        </div>

    <div className="row">
    //answer choice 3
    <div onClick={k_Clicked} className={`${k_Checked} column`}>
      <img alt="Possible Answer" src={`${answerUrl}${k}.png`}/>
    </div>

//asnwer choice 4
    <div  onClick={l_Clicked} className={`${l_Checked} column`}>
      <img alt="Possible Answer" src={`${answerUrl}${l}.png`}/>
    </div>
    </div>
</div>

  )
}
const mapDispatchToProps=dispatch=>({
    i_Clicked: ()=> dispatch(i_Clicked()),
    j_Clicked: ()=> dispatch(j_Clicked()),
    k_Clicked: ()=> dispatch(k_Clicked()),
    l_Clicked: ()=> dispatch(l_Clicked())

});

const mapStateToProps=state=>({

    i_Checked: state.i_Checked,
    j_Checked:state.j_Checked,
    k_Checked:state.k_Checked,
    l_Checked:state.l_Checked,
    i:state.i,
    j:state.j,
    k:state.k,
    l:state.l
});

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

Когда я нажимаю на первый вариант ответа на проблему (обозначается буквой «i» для i , j, k, l) он отображается в массиве ответов, а i_checked имеет значение «флажок», поэтому действие кажется работающим, просто пропуски не загружаются в компоненте?

Answer 1

вы можете опубликовать свой root файл редуктора ?. место, которое вы используете combineReducers

export default combineReducers({
  question: QuestionReducer,
});

Если это то, как вы реализовали, ваше mapStateToProps должно быть изменено следующим образом

const mapStateToProps=state=>({
    i_Checked: state.question.i_Checked,
    j_Checked:state.question.j_Checked,
    k_Checked:state.question.k_Checked,
    l_Checked:state.question.l_Checked,
    i:state.question.i,
    j:state.question.j,
    k:state.question.k,
    l:state.question.l
});

состояние будет состоять из всего хранилища редуксов и question заполните ссылочные данные, относящиеся к разделу вопроса