在react native中使用@reduxjs/toolkit更新购物车项目数量和价格

npm install redux @reduxjs/toolkit

import { configureStore, createSlice } from '@reduxjs/toolkit';

const cartSlice = createSlice({
  name: 'cart',
  initialState: { items: [], totalPrice: 0 },
  reducers: {
    addItem: (state, action) => {
      const newItem = action.payload;
      const existingItem = state.items.find(item => item.id === newItem.id);
      if (existingItem) {
        existingItem.quantity++;
      } else {
        state.items.push({ ...newItem, quantity: 1 });
      }
      state.totalPrice += newItem.price;
    },
    removeItem: (state, action) => {
      const itemId = action.payload;
      const existingItem = state.items.find(item => item.id === itemId);
      if (existingItem) {
        if (existingItem.quantity === 1) {
          state.items = state.items.filter(item => item.id !== itemId);
        } else {
          existingItem.quantity--;
        }
        state.totalPrice -= existingItem.price;
      }
    },
    clearCart: state => {
      state.items = [];
      state.totalPrice = 0;
    }
  }
});

const store = configureStore({
  reducer: cartSlice.reducer
});

export const { addItem, removeItem, clearCart } = cartSlice.actions;
export default store;

import React from 'react';
import { View, Text, Button } from 'react-native';
import { useDispatch } from 'react-redux';
import { addItem, removeItem, clearCart } from './store/cartSlice';

const ShoppingCart = () => {
  const dispatch = useDispatch();

  const handleAddItem = () => {
    const newItem = { id: 1, name: 'Product 1', price: 10 };
    dispatch(addItem(newItem));
  };

  const handleRemoveItem = () => {
    const itemId = 1;
    dispatch(removeItem(itemId));
  };

  const handleClearCart = () => {
    dispatch(clearCart());
  };

  return (
    <View>
      <Text>Shopping Cart</Text>
      <Button title="Add Item" onPress={handleAddItem} />
      <Button title="Remove Item" onPress={handleRemoveItem} />
      <Button title="Clear Cart" onPress={handleClearCart} />
    </View>
  );
};

export default ShoppingCart;