Add an object to an array using redux toolkit

Question

everyone. I want to store an Object into an array using redux toolkit. Unfortunately, it is the case that a new object is not added, but simply replaced. How can I change this behavior ?

import { createSlice } from "@reduxjs/toolkit";

const initialState = {
 warenkorb: [],
 preis: 0,
 bewertung: 0,
};

export const produktSlice = createSlice({
name: "produkt",
initialState,

reducers: {
hinzufügen: (state, action) => {

  // Also not work
  // state.warenkorb.push(action.payload);
  //

  state.warenkorb.push([...state.warenkorb, action.payload]);
  state.preis += action.payload.preis * action.payload.anzahl;
},
entfernen: (state, action) => {
  if (state.warenkorb.includes(action.payload)) {
    state.warenkorb.splice(
      state.warenkorb.findIndex((id) => id === action.payload),
      1
    );
  }
},
bewerten: (state, action) => {
  state.bewertung = action.payload.bewertung;
 },
 },
});

export const { hinzufügen, entfernen, bewerten } = produktSlice.actions;

export default produktSlice.reducer;

As you can see, a new call is started each time with the new object

And if I look at it with the help of the debugger, I get to see this. Why the first two objects and why do they look like this?

You want to replace or just append ?

Kaneki21
– Kaneki21

2022-08-12 11:22:33 +00:00
Commented Aug 12, 2022 at 11:22 — Kaneki21
– Kaneki21, Commented Aug 12, 2022 at 11:22
I want to append new objects

Captai-N
– Captai-N

2022-08-12 11:26:45 +00:00
Commented Aug 12, 2022 at 11:26 — Captai-N
– Captai-N, Commented Aug 12, 2022 at 11:26
I assume in this entfernen reducer ?

Kaneki21
– Kaneki21

2022-08-12 11:31:14 +00:00
Commented Aug 12, 2022 at 11:31 — Kaneki21
– Kaneki21, Commented Aug 12, 2022 at 11:31

Ahmed Gaafer · Accepted Answer · 2022-08-12 15:05:40Z

3

You should not push into the state you should replace the current state with a whole new state to ensure state updates

The code should be:


hinzufügen: (state, action) => {

  state.warenkorb = [...state.warenkorb, action.payload];
  
}

I made this sandbox for the total working example

edited Aug 12, 2022 at 15:05

answered Aug 12, 2022 at 11:39

Ahmed Gaafer

1,6811 gold badge11 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Captai-N Over a year ago

Thx. But also didn't work

Ahmed Gaafer Over a year ago

@Captai-N please check the sandbox example i added

Collectives™ on Stack Overflow

Add an object to an array using redux toolkit

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related