Реагировать Redux, как индексировать ключ состояния в mapStateToProps - PullRequest
0 голосов
/ 17 января 2019

У меня проблемы с отображением индекса в значение ключа из моего состояния. Мое значение состояния для state.datalist изначально устанавливается при загрузке componentA. Я прошел через componentB и вижу, что в моем state.datalist изначально есть значения, заполненные списком моих предметов. Однако после того, как функция рендеринга завершится в componentB, значение state.datalist.items станет неопределенным. state.datalist.selected все еще определено. Почему это? Мой редуктор не касается клавиши datalist.items в моем состоянии.

Я в основном устанавливаю свое состояние, используя диспетчер в componentA, который получает список элементов. Затем я отображаю этот список в componentA. Когда ссылка нажата в componentA, она выполняет диспетчеризацию, которая устанавливает идентификатор выбранного элемента в состоянии, а затем перенаправляет на componentB, используя history.push(/componentB).

Когда компонент B изначально загружается, вот что находится в элементах:

[
  0:{dataId:5, dataName: "Some text"},
  1:{dataId:6, dataName: "Some more text"}
]

В компоненте A я щелкаю ссылку, которая выбирает элемент с dataId 5. Затем ему присваивается значение selected в состоянии.

Код моего действия:

function setSelectedData(dataId) {
   return dispatch => {
       dispatch(request(dataId));
   };

   function request(dataId) { return { type: competitionConstants.SETSELECTED, dataId} }

}

Код моего редуктора:

import { constants } from '../_constants';

const initialState = {items: [], loading: false, selected: null}

export function datalist(state = initialState, action) {
  switch (action.type) {
        case dataConstants.SETSELECTED:
    console.log("the action value in SETSELECTED: ", action)
    return {
        ...state,
        selected: action.dataId,
        loading: false
    };
    default:
      return state
  }
}

В компоненте A у меня есть следующий обработчик для onClick.

handleLoadData(dataId) {
    this.props.dispatch(dataActions.setSelectedCompetition(dataId));
    history.push('/componentB')
} 

В componentB у меня есть функция mapStateToProp, которую я передаю для подключения.

function mapStateToProps(state) {
   const { selected, loading, items } = state.datalist;

   return {
      //myKey: items, 
      myKey: items[selected], //this is what I'm trying to get to work
      isLoading: loading
   };
}

export default connect(mapStateToProps)(Dashboard);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...