Breaking News: Grepper is joining You.com. Read the official announcement!

add to cart redux toolkit

Khalid Khan answered on September 21, 2022 Popularity 9/10 Helpfulness 8/10

answer add to cart redux toolkit

related add to cart redux toolkit

add to cart redux toolkit

Comment

Copy 
1// src/redux/cartSlice.js
2import { createSlice } from '@reduxjs/toolkit';
3
4const cartSlice = createSlice({
5  name: 'cart',
6  initialState: {
7    cart: [],
8  },
9  reducers: {
10    addToCart: (state, action) => {
11      const itemInCart = state.cart.find((item) => item.id === action.payload.id);
12      if (itemInCart) {
13        itemInCart.quantity++;
14      } else {
15        state.cart.push({ ...action.payload, quantity: 1 });
16      }
17    },
18    incrementQuantity: (state, action) => {
19      const item = state.cart.find((item) => item.id === action.payload);
20      item.quantity++;
21    },
22    decrementQuantity: (state, action) => {
23      const item = state.cart.find((item) => item.id === action.payload);
24      if (item.quantity === 1) {
25        item.quantity = 1
26      } else {
27        item.quantity--;
28      }
29    },
30    removeItem: (state, action) => {
31      const removeItem = state.cart.filter((item) => item.id !== action.payload);
32      state.cart = removeItem;
33    },
34  },
35});
36
37export const cartReducer = cartSlice.reducer;
38export const {
39  addToCart,
40  incrementQuantity,
41  decrementQuantity,
42  removeItem,
43} = cartSlice.actions;

Popularity 9/10 Helpfulness 8/10 Language javascript

Source: blog.openreplay.com

Tags: add cart javascript redux-toolkit

Link to this answer
Share Copy Link

Contributed on Sep 21 2022

Khalid Khan

0 Answers Avg Quality 2/10

Closely Related Answers

add to cart redux toolkit

Comment

Copy 
1// src/redux/cartSlice.js
2import { createSlice } from '@reduxjs/toolkit';
3
4const cartSlice = createSlice({
5  name: 'cart',
6  initialState: {
7    cart: [],
8  },
9  reducers: {
10    addToCart: (state, action) => {
11      const itemInCart = state.cart.find((item) => item.id === action.payload.id);
12      if (itemInCart) {
13        itemInCart.quantity++;
14      } else {
15        state.cart.push({ ...action.payload, quantity: 1 });
16      }
17    },
18    incrementQuantity: (state, action) => {
19      const item = state.cart.find((item) => item.id === action.payload);
20      item.quantity++;
21    },
22    decrementQuantity: (state, action) => {
23      const item = state.cart.find((item) => item.id === action.payload);
24      if (item.quantity === 1) {
25        item.quantity = 1
26      } else {
27        item.quantity--;
28      }
29    },
30    removeItem: (state, action) => {
31      const removeItem = state.cart.filter((item) => item.id !== action.payload);
32      state.cart = removeItem;
33    },
34  },
35});
36
37export const cartReducer = cartSlice.reducer;
38export const {
39  addToCart,
40  incrementQuantity,
41  decrementQuantity,
42  removeItem,
43} = cartSlice.actions;

Popularity 9/10 Helpfulness 2/10 Language javascript

Source: blog.openreplay.com

Tags: add

Link to this answer
Share Copy Link

Contributed on Sep 21 2022

Khalid Khan

0 Answers Avg Quality 2/10

add to cart redux toolkit

Contents

More Related Answers

add to cart redux toolkit

Closely Related Answers

add to cart redux toolkit

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.