Увеличение счетчика в редукторе createSlice Redux-Toolkit
Я пытаюсь увеличить счетчик внутри функции редуктора для объекта. Здесь, в действии addItem, я пытаюсь увеличить количество, если добавленный товар уже присутствует в магазине.
import { createSlice, current } from "@reduxjs/toolkit";
import React from "react";
const cartSlice = createSlice({
name: "cart",
initialState: {
items: [],
},
reducers: {
addItem: (state, action) => {
let a = 0;
current(state.items).map((item) => {
console.info(item, "hey there");
if (item === action.payload) {
console.info("Matched");
console.info("Count1 is", ++item.card.info.count);
item.card.info.count = item.card.info.count + 1;
console.info("Count2 is", item.card.info.count);
a = 1;
return;
}
});
if (a == 0) {
state.items.push(action.payload);
}
},
removeItem: (state, action) => {
state.items.pop();
},
clearCart: (state, action) => {
state.items.length = 0;
},
},
});
export const { addItem, removeItem, clearCart } = cartSlice.actions;
export default cartSlice.reducer;
Ниже прикрепляю вывод консоли.
{card: {…}} 'hey there'
cartSlice.js:15 Matched
cartSlice.js:16 Count1 is 1
cartSlice.js:18 Count2 is 0
cartSlice.js:13 {card: {…}} 'hey there'
cartSlice.js:15 Matched
cartSlice.js:16 Count1 is 1
cartSlice.js:18 Count2 is 0
cartSlice.js:13 {card: {…}} 'hey there'
cartSlice.js:15 Matched
cartSlice.js:16 Count1 is 1
cartSlice.js:18 Count2 is 0
cartSlice.js:13 {card: {…}} 'hey there'
cartSlice.js:15 Matched
cartSlice.js:16 Count1 is 1
cartSlice.js:18 Count2 is 0
cartSlice.js:13 {card: {…}} 'hey there'
cartSlice.js:15 Matched
cartSlice.js:16 Count1 is 1
cartSlice.js:18 Count2 is 0
Посоветуйте мне, что я делаю здесь неправильно.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Утилита current дает вам только текущее значение состояния, но это не черновое состояние, которое вам следует обновлять.
Функция
currentиз библиотеки immer, которая делает снимок текущее состояние черновика и завершает его (но без заморозки). Current — отличная утилита для печати текущего состояния во время отладка, а выводcurrentтакже можно безопасно выпустить наружу продюсер.
По сути, это копия состояния, а не фактическое состояние, поэтому любые обновления/мутации/и т. д. копии не будут иметь абсолютно никакого влияния на фактическое состояние Redux.
Обычной практикой является сначала поиск в массиве соответствующего элемента, который вы хотите обновить, и если он найден, обновите его (с возможностью изменения), в противном случае добавьте его в массив.
Пример:
addItem: (state, action) => {
const item = state.items.find(
item => item.someProperty === action.payload.someProperty
);
if (item) {
item.card.info.count++;
} else {
state.items.push(action.payload);
}
},
@ShaktiRajSingh Да, мне действительно было интересно, передаете ли вы объекты состояния обратно через полезные данные действий, но, поскольку казалось, что ваши журналы работают, значит, все в порядке. Согласен, обычно вы сравниваете свойства объекта, например. как id недвижимость и т. д.
Спасибо, у меня то же самое получилось с помощью удара и пробы. Я хотел бы добавить здесь то, что я сравнивал два объекта (item===action.payload), что было неправильно и потребовало много времени, чтобы понять это. Итак, для моего случая (item.somaValue === action.payload.someValue) такое сравнение применимо. Еще раз спасибо, что прояснили ситуацию для всех.