Почему props меняется сразу для всех, а не для каждого отдельно, react/redux?

Question

[ch-aqwer]

Добрый день! Подскажите пожалуйста как передать props, чтобы они работали только для одного определенного item-a?
Ситуация..
Есть главный stateFull компонент index
дальше есть stateLess компонент - list, а в нем уже stateLess копонент item.
Все props передаю с index-а в item.
Есть props-а isLoading, которой при редактировании принимает булево значение и соответственно в item должны отображаться соответствующие стили.
И вот когда я редактирую один item , это значение меняется для всех.
Не понимаю почему так и как это грамотно исправить.
isLoading передаю сначала в List а потом в Item
Буду благодарен за помощь!

Answer 1

[Егор Живагин]

isLoading - состояние только компонента item ? Так храните его в item )

Comments

[ch-aqwer]

Как? переделать item в stateFull component?

[Егор Живагин]

ch-aqwer, да, например так.

Или хранить в isLoading в Index массив состояний item.

[ch-aqwer]

Егор Живагин, сейчас переделал через statefull компонент
записываю isLoading в mapStateToProps через селектор, но ничего не меняеться.
Не понимаю почему...

[Егор Живагин]

ch-aqwer, скинешь код в какую-нибудь песочницу?

[ch-aqwer]

Егор Живагин, много всего надо извлекать ...
проблема в том, что я беру isLoading с редюсера и при onChange одного итема значение изменяется во всех.
надо как-то на onChange записывать в стейт...

Answer 2

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

Можно сделать isLoading и хранилище сущностей объектом:

const initialState: {
  entities: {}.
  isLoading: {
    'ALL': false, 
  },
   isError: {
    'ALL': false, 
  }
}

const someEntityReduser = (state = initalState, action) => {
  const { type, payload } = action;

  switch (type) {
    case GET_ALL_ENTITIES_REQUEST:
      return {
        ...state,
        isLoading: {
          ...state.isLoading,
          'ALL': true, 
        },
        isError: {
          ...state.isError,
          'ALL': false, 
        },
      };

    case GET_ALL_ENTITIES_SUCCESS:
      return {
        ...state,
        entities: payload,  // либо нормализация если приходят массивом
        isLoading: {
          ...state.isLoading,
         'ALL': false,
        },
      };

    case UPDATE_ENTITY_REQUEST:
      return {
        ...state,
        isLoading: {
          ...state.isLoading,
          [payload.id]: true, 
        },
        isError: {
          ...state.isError,
          [payload.id]: false, 
        },
      };
      
    case UPDATE_ENTITY_SUCCESS:
      return {
        ...state,
        entities: {
           ...state.entities,
           [payload.id]: payload,  
        },
        isLoading: {
          ...state.isLoading,
          [payload.id]: false,
        },
      };
    
     /* other cases */
  }
}

Comments

[ch-aqwer]

Как-то не очень выглядит..
видимо надо переделывать в stateFull component и хранить в стейт

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

ch-aqwer, такие вещи генерируют через CRUD boierplate для всех сущностей c CRUD интерфейсом. Один из самых лучших и гибких вариантов для redux.
Переделаете в statefull компонент и придется для каждой сущности писать похожую логику в компонентах, а так же отказаться от redux. Чем тупей элемент списка, тем лучше. Он, по-хорошему, должен получить свойства в зависимости он них, что-то показать и прицепить хандлер на событие. А вы в нем всю логику хотите реализовать.
Ресерчте в сторону redux CRUD boilerplate

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

ch-aqwer, мы в проекте свели такие сущности вот к такому интерфейсу:

const {
  reducer,
  actions,
  selectors,
  api,
  actionTypes,
} = generateCrudBoilerplate(
  'products',
  {
    getList: () => `/api/products`,
    getOne: id => `/api/product/${id}`,
    add: payload => `/api/product/`,
    remove: id => `/api/product/${id}`,
    edit: (id, payload) => `/api/product/${id)`,
  }
);

Генерируется все. Проект большой CRUD сущностей много и использование такого генератора оправдывает себя по полной.

[ch-aqwer]

Антон Спирин, не пойму как это мне поможет?!

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

ch-aqwer, вы бы код свой хоть сбросили для начала.
Все зависит от задач которые перед вами стоят, если это проект который пойдет в production и будет еще много подобных сущностей, то лучше написать boilerplate, если просто балуетесь или учитесь, то можно и поправить внеся минимальные изменения, закрывая глаза на такие вещи как архитектура, масштабируемость, связаность кода, вопросы поддержки и прочее.

В теге к вопросу вы указали redux, поэтому я написал совет, как это решить с помощью redux.

[Ninja Mate]

Антон Спирин, а можно это где то посмотреть?