Почему не перерисовывается компонент?

Question

[Артур]

Есть контейнер TableContainer - содержит данные таблицы, состояние сортировки, обработчики.
И есть компонент Table, отрисовывает данные переданные из контейнера и использует переданные из контейнера обработчики.

TableContainer подключен к редакс.
В componentDidMount TableContainer, происходит запрос за данным по получению которых обновляется redux store.
Данные из редакс стора ложатся в стейт TableContainer (не ложатся почему-то.., но в самом сторе лежат). Если переключиться по роутам, то при обратном заходе на страницу с таблицей, данные подгрузятся как положено (Т.к. в сторе они уже есть).

Стейт TableContainer

state = {
    data: this.props.data, //данные из редакса
    sortParams: {
      column: null,
      direction: null,
    },
  };

  componentDidMount() {
    this.props.fetchTableData(this.props.service);
  }

...

В рендере TableContainer рисуется Table с данными из своего стейта.

render() {
  return <Table data={this.state.data} handlers={handlers}>
}

Проблема в том что при получении данных при первой загрузке не обновляется state TableContainer и соответственно не перерисовывается Table). В сторе данные есть, но стейт TableContainer не обновился и в Table просто передался пустой массив.

Почему такое происходит? В редьюсерах везде возвращаются новые объекты.

Answer 1

[Антон Спирин]

1. Вы инициируете загрузку данных после монтирования компонента, а присваиваете состояние до.
2. В вашем случае, вообще не надо хранить данные в состоянии компонента.
3. По изменению параметров фильтрации/сортировки, по-хорошему, должен происходить новый запрос с соответствующими параметрами.

Comments

[Артур]

1. Я думал что при изменении стора, компонент должен перерисоваться, т.к он подписан к стору, соответственно и переприсвоиться состояние.
2-3. Я хочу (только)сортировать просто данные записанные в стейт, без дополнительных запросов.

Немного не понимаю

[Антон Спирин]

Артур,
1. Компонент перерисовывается. Но значение состояния вы присваиваете при инициализации компонента, данные еще в этот момент не получены.

Вам даже с вашей локальной сортировкой нет никакого смысла писать данные в локальное состояние:

render () {
  const { data } = this.props;
  const { column, direction } = this.state;
 
  const sortedData = data.sort(...);
  // ...
}

2-3. Учитесь решать задачи правильно, локальные сортировки и фильтрации данных таблиц редко используются в реальных приложениях. Почитайте про пагинацию.

[Артур]

Антон Спирин, дело в том что у меня в таблице есть еще редактируемые поля, и отдельно колонка с кнопкой для обновления состояния данных на бекенде по каждой строке отдельно, т.е мне править тогда состояние строк в редаксе вместо стейта?

т.е например в таблице 10 строк.
в каждой строке есть инпут в котором можно изменить значение и отправить изменения на бекенд по клику на кнопку, только относящиеся к этой строке

Answer 2

[justadumb]

а зачем вы вообще кладете данные из стора в стейт контейнера? передавайте прямо значение из стора

Comments

[Артур]

я решил вынести всю логику и методы из таблицы в контейнер, и стейт удобнее держать в контейнере вместе с методами которые обрабатывают этот стейт

[justadumb]

Артур, в контейнере из редакс-стора данные получаете, передаете их презентационному компоненту, ни в какой стейт сохранять их не нужно, я это имею в виду