@ch-aqwer

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

Добрый день! Подскажите пожалуйста как передать props, чтобы они работали только для одного определенного item-a?
Ситуация..
Есть главный stateFull компонент index
дальше есть stateLess компонент - list, а в нем уже stateLess копонент item.
Все props передаю с index-а в item.
Есть props-а isLoading, которой при редактировании принимает булево значение и соответственно в item должны отображаться соответствующие стили.
И вот когда я редактирую один item , это значение меняется для всех.
Не понимаю почему так и как это грамотно исправить.
isLoading передаю сначала в List а потом в Item
Буду благодарен за помощь!
  • Вопрос задан
  • 123 просмотра
Решения вопроса 2
Krasnodar_etc
@Krasnodar_etc
little front
isLoading - состояние только компонента item ? Так храните его в item )
Ответ написан
rockon404
@rockon404
Frontend Developer
Можно сделать 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 */
  }
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы