Почему reselect не работает?

Question

[Макс Жуков]

selector

import { createSelector } from 'reselect';

const getGames = state => state.game.games;

export const gamesSelector = createSelector(getGames, games => games);

container

import { gamesSelector } from '../../../selectors';


const mapStateToProps = state => ({
  games: gamesSelector(state),
});

При изменении данных объекта одной игры перерендериваются все компоненты games.

Answer 1

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

А чего вы ожидали? Вы создаете бесполезный селектор, который ничего не выбирает, а просто пропускает через себя объект games. Затем, этот объект вы целиком передаете в connect. Естественно, при его изменении ваш компонент перерисует по цепочке все дочерние компоненты.
Делайте в компонентах Game проверку shouldComponentUpdate и сравнивайте входящие объекты:

shouldComponentUpdate(nextProps) {
  return nextProps.game !== this.props.game;
}

Comments

[Макс Жуков]

Мне и не нужно выбирать что-то мне нужно сделать меморизацию данных чтобы они все не менялись, у меня Game это PureComponent

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

Макс Жуков, если компонент перерисовывается, значит какое-то из входящих props изменяется. Проверить какое вы можете в том же shouldComponentUpdate или componentWillReceiveProps.

Я надеюсь вы не передаете объект games в каждый компонент с игрой? Если так, то не удивительно, что они у вас перерисовываются.

[Макс Жуков]

Антон Спирин, Нет в компонент game передается только один элемент массива games.
Может дело в reducer, вот как он выглядит:

[changeGameFavorite](state, { payload: gameId }) {
    const games = state.games.map((gameInfo) => {
      const game = { ...gameInfo };
      if (game && game.id === gameId) {
        game.favorite = !game.favorite;
      }
      return game;
    });
    return { ...state, games };
  },

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

Макс Жуков, ну да. Вы же заменяете каждый объект новым. Поправить можно так:

[changeGameFavorite](state, { payload: gameId }) {
    const games = state.games.map(game => {
      if (game && game.id === gameId) {
        return { ...game, favorite: !game.favorite };
      }
      return game;
    });

    return { ...state, games };
  },