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

taor4pac 于 2022-11-12 发布在其他

关注(0)|答案(1)|浏览(113)

我正在为移动的商店创建购物车。我想更改它以使用@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;

上面的输出在array的下面--这是要推到Cart的内容。我想修改上面的代码以使用reduxjs，并输出与下面类似的输出，以及增加/减少Cart的数量。

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;

redux

来源：https://stackoverflow.com/questions/73635129/how-can-i-create-a-cart-with-reduxjs-toolkit

1条答案

按热度按时间

ljsrvy3e1#

你可以遵循这个逻辑。首先让它在你的项目中工作，然后进一步扩展它。

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,
  },
});

赞(0）回复(0）举报 2022-11-12

我来回答

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

1条答案

相关问题

热门标签

最新问答