如何使用reduxjs/toolkit创建购物车

Question

我正在为一个移动商店创建一个购物车。我想将其更改为使用@reduxjs/toolkit。我有下面的reducer代码，我需要更改它才能使用reduxjs/toolkit 运行

import {
ADD_TO_CART,
REMOVE_FROM_CART,
CLEAR_CART
} from '../constants';
const cartItems = (state = [], action) => {
switch (action.type) {
case ADD_TO_CART:
return [...state, action.payload]
case REMOVE_FROM_CART:
return state.filter(cartItem => cartItem !== action.payload)
case CLEAR_CART:
return state = []
}
return state;
}
export default cartItems;

上面的输出在数组下面——这就是被推到Cart的内容。我想更改上面的代码以使用reduxjs，并输出如下类似的输出，并递增/递减购物车数量。

Array [
Object {
"product": "5f15d92ee520d44421ed8e9b",
"quantity": 1,
},
Object {
"product": "62e5285f92b4fde9dc8a384c",
"quantity": 1,
},
Object {
"product": "62e52c4892b4fde9dc8a3881",  
"quantity": 1,
},
Object {
"product": "62e52c4892b4fde9dc8a3881",
"quantity": 1,
},

]

我已经在下面创建了新店

import {
configureStore
} from "@reduxjs/toolkit";
import cartItems from "./Reducers/cartslice";
import {
combineReducers
} from "redux";
const reducer = combineReducers({
cartItems: cartItems,
});
const store = configureStore({
reducer,
});
export default store;

我一直在用reduxjs创建一个新的reducer，下面是代码。

import { createSlice } from '@reduxjs/toolkit';
const cartItems = createSlice({
name: 'cart',
initialState: {cart:[]},
reducers: {
addToCart: (state, action) => {
//What do I input here
},
},
});
export default cartItems.reducer;

Answer 1

您可以遵循此逻辑。首先让它与你的项目一起工作，然后进一步扩展。

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
import { cartService } from "./cart.service"

const initialState = {
cart: [],
isLoading: false,
isSuccess: false,
isError: false,
}
export const addToCart = createAsyncThunk(
'cart/add',
async(cartData, thunkAPI) => {
try {
return await cartService.addToCart(cartData) /* this is your axios (or any other) call, you can keep it in separate file or have it here, up to you I choose the separation of concerns */
} catch (error) {
console.log(error);
return thunkAPI.rejectWithValue(error)
}
}
)
export const cartSlice = createSlice(
{
name: 'cart',
initialState,
reducers: {
reset: (state) => initialState
},
extraReducers: (builder) => {
builder
.addCase(addToCart.pending, (state) => {
state.isLoading = true
})
.addCase(addToCart.fulfilled, (state, action) => {
state.isLoading = false
state.isSuccess = true
state.cart = action.payload

})
.addCase(addToCart.rejected, (state) => {
state.isLoading = false
state.isError = true
})  
}
})
export const { reset } = cartSlice.actions
export default cartSlice.reducer

编辑：stoje.js:

import { configureStore } from '@reduxjs/toolkit';
import cartReducer from '../features/cart/cart.slice'; // Your path to the slice
export const store = configureStore({
reducer: {
cart: cartReducer,
},
});