Как поменять clicked с false на true?

Question

[chatterbox777]

В BasketReducer надо вернуть копию state и изменить значение кликнутого BasketItem'а на true, как прописать после

return {
...state,
// что здесь писать? как добраться до clicked ? я пытался так но соответственно пишет что неправильный синтаксис 
state.basketItems[action.id].clicked = !state.basketItems[action.id].clicked,
}

диспатч:

addItemToBasket: (e, id) => dispatch({ type: "ADD_BASKET", e: e, id: id })

basket-reducer.js

let initialState = {
  basketItems: [
    {
      BasketItemId: 1,
      description: "Это прекрасный товар, который Вам обязательно стоит взять",
      imgSrc:
        "https://remontdoma24.ru/image/cache/data/ruchnoj-instrument-hoztovary/sadoviy-unstrument-i-inventar/vedra/65428-230x230.jpg",
      clicked: false,
    },
    {
      BasketItemId: 2,
      description: "Это прекрасный товар, который Вам обязательно стоит взять",
      imgSrc:
        "https://hailo.moscow/thumb/2/jXDp6iWcmPKzSiOvkaV2IQ/200r200/d/hailo_profiline_solid_0514-079_v_magazine_hailomoscow.jpg",
      clicked: false,
    },
    {
      BasketItemId: 3,
      description: "Это прекрасный товар, который Вам обязательно стоит взять",
      imgSrc:
        "https://suplbiz-a.akamaihd.net/media/cache/8d/bc/8dbc89845bdf0a9fb6174979ce950591.jpg",
      clicked: false,
    },
    {
      BasketItemId: 4,
      description: "Это прекрасный товар, который Вам обязательно стоит взять",
      imgSrc:
        "https://res.cloudinary.com/lmru/image/upload/f_auto,q_auto,w_278,h_278,c_pad,b_white,d_photoiscoming.png/LMCode/82402777.jpg",
      clicked: false,
    },
    {
      BasketItemId: 5,
      description: "Это прекрасный товар, который Вам обязательно стоит взять",
      imgSrc:
        "https://prorab01.ru/upload/w_512/448302da09724b314b3612ba5b8297d1.jpg",
      clicked: false,
    },
    {
      BasketItemId: 6,
      description: "Это прекрасный товар, который Вам обязательно стоит взять",
      imgSrc:
        "https://www.alternat.ru/upload/iblock/945/9459eba2a7bf682d267c7aff170f9e75.jpg",
      clicked: false,
    },
  ],
};

export const basketReducer = (state = initialState, action) => {
  switch (action.type) {
    case "ADD_BASKET":
      return {
        ...state,
       // пытаюсь прописать  state.basketItems[action.id].clicked = !state.basketItems[action.id].clicked
      };

    default:
      return state;
  }
};

Answer 1

[0xD34F]

return {
  ...state,
  basketItems: state.basketItems.map(n => n.id === action.id
    ? { ...n, clicked: !n.clicked }
    : n
  ),
};

Comments

[chatterbox777]

я написал следующим образом и у меня заработало все) спасибо за ответ!
return {
...state,
...(state.basketItems[action.id - 1].clicked = !state.basketItems[
action.id - 1
].clicked),
};

[0xD34F]

chatterbox777, ну и говнокодище. То, что заработало - это случайность, данные такие попались. С другими данными работать будет криво или не будет работать вообще.

[no-taktik]

chatterbox777, Ты же мутируешь стейт, у тебя в итоге компоненты обновляться не будут.

[chatterbox777]

no-taktik, почему мутирую? я же копию делаю ...state

[chatterbox777]

0xD34F, подскажи пожалуйста как перестать говнокодить? я самоучка... почитать что то? грокаем алгоритмы или че?)

[chatterbox777]

0xD34F, твой код не работает кстати, не меняется стейт

[no-taktik]

chatterbox777, копируется поверхностно

[chatterbox777]

no-taktik, а как сделать то тогда? реально обновляются только после перехода на другой компонент и обратно

[no-taktik]

Так ответ же уже дан, попробуй так

[chatterbox777]

no-taktik, не робит, стейт не меняется по его ответу

[chatterbox777]

0xD34F, все , заработал... просто вместо n.id === action.id должно было быть n.basketItemId, спасибо!!!

[0xD34F]

код не работает кстати, не меняется стейт

chatterbox777, код работает, кстати, стейт меняется. А вот вы - неспособны даже на такую малость, как скопипастить несколько строк. Если собираетесь настаивать на "не работает" - потрудитесь свои слова доказать, предоставьте соответствующий пример в песочнице, покажите, как вы облажались.

[chatterbox777]

0xD34F, выше написал, я скопипастил) но просто была маленькая опечатка... так как я обозвал id не id, а BasketItemId, еще раз огромное спасибо! теперь еще больше уложилось в голове че и как))

[0xD34F]

chatterbox777, а, ну значит я облажался, не обратил внимание на имя свойства.

Приношу свои извинения.

[chatterbox777]

0xD34F, от души спасибо!!!!