Компонент React не получает реквизиты после обновления магазина Redux - PullRequest
Новая
       8

Компонент React не получает реквизиты после обновления магазина Redux

0 голосов
/ 22 февраля 2019

Что работает:

  • Saga извлекает данные из API.Редуктор для UPDATE_LOTS запускается и возвращает новое состояние.
  • Хранилище Redux обновляется с правильными данными, которые можно наблюдать в расширении Chrome и при ведении журнала.

Чтоне работает:

  • componentDidUpdate никогда не срабатывает.Кроме того, componentWillReceiveProps при его замене.
  • Поскольку компонент никогда не получал обновления, повторного рендеринга также не происходит.

В большинстве советов по этой теме обсуждается, как людислучайно изменяет состояние, однако в моем случае я этого не делаю.Я также попробовал следующую конструкцию {...state, lots: action.data} вместо использования Map.set ImmutableJS без удачи.

Есть идеи?Здесь нет списка файлов саги, потому что эта часть потока данных работает отлично.

Компонент: 

class Lots extends React.Component {
  constructor(props) {
    super(props);

    this.props.onFetchLots();
  }

  componentDidUpdate() {
    console.log('updated', this.props.lots);
  }

  render() {
    const lots = this.props.lots;
    console.log('render', lots);
    return (lots && lots.length) > 0 ? <Tabs data={lots} /> : <div />;
  }
}

Отображение и состав: 

function mapDispatchToProps(dispatch) {
  return {
    onFetchLots: () => {
      dispatch(fetchLots());
    },
  };
}

function mapStateToProps(state) {
  return {
    lots: state.lots,
  };
}

const withConnect = connect(
  mapStateToProps,
  mapDispatchToProps,
);

const withReducer = injectReducer({ key: 'lots', reducer: lotsReducer });
const withSaga = injectSaga({ key: 'lots', saga });

export default compose(
  withReducer,
  withSaga,
  withConnect,
)(Lots);

Редуктор: 

export const initialState = fromJS({
  lots: false,
});

function lotsReducer(state = initialState, action) {
  switch (action.type) {
    case FETCH_LOTS:
      console.log('fetch lots');
      return state;

    case UPDATE_LOTS:
      console.log('update lots', action.data.data);
      return state.set('lots', action.data.data);

      default:
      return state;
  }
}

1 Ответ

0 голосов
/ 22 февраля 2019

Все было правильно, кроме функции mapStateToProps.

Поскольку использовался ImmutableJS, мне пришлось обращаться к свойству состояния как state.get("lots") вместо state.lots.

.исправил проблему.

...