Как обновить только один элемент массива в Redux?

Question

[eternalfire]

Всем привет!

У меня есть state в redux - массив элементов. С помощью хука useSelector() достаю этот массив из redux

const places = useSelector(state => state.project.places);

Далее отображаю этот массив

places.map((place, index) => (
    <Place
        key={index}
        place={place}
    />
));

При изменении одного элемента массива происходит re render всей таблицы. Не подскажите как можно этого избежать? Изменить один элемент массива и следовательно одну строку в таблице, и отрендерить заново только одну строку.

Answer 1

[Mikhail Osher]

Вызов функции render не означает перерисовку DOM. React разберётся, что нужно изменить.
Если хочется "супер производительности", тогда надо изменить структуру store на что-то такое:

const initialState = {
  result: [], // list of ids
  data: {}, // map by id
}

export const placesReducer = (state, { type, payload }) => {
  switch (type) {
    case 'PLACES_LOAD_SUCCESS':
      return {
        ...state,
        // псевдокод, можно использовать https://github.com/paularmstrong/normalizr
        result: payload.map(id),
        data: payload.reduce(keyById),
      }
  }
}

// по этому результату делаете .map
export const getPlaces = state => state.places.result
// этот селектор будет дергать каждый Place, только ему нынче кидайте не place={place}, а id={id}, ибо .map по идентификаторам идёт
export const getPlace = (state, id) => state.places.data[id];

Не забывайте, что таким способом Вы создаёте N+1 подписок, а раньше была 1 подписка.
React очень много раз вызывает функцию render (либо же саму функцию-компонент), поэтому в "лишних" ререндерах нет ничего страшного. Замечательный пост на эту тему: https://kentcdodds.com/blog/fix-the-slow-render-be...

Comments

[eternalfire]

Спасибо за идею!