如何在Redux Reducer中将状态更改为对象数组中的其他对象

Question

我有一个React Redux单页应用程序，显示汽车及其可用功能，并根据用户选择的功能更新汽车的总成本。现在我的减速器里只有一个汽车对象。我希望能够拥有几个汽车对象的数组，并让应用程序只显示所选汽车对象的信息。我想我要做的就是在减速器中将汽车添加到初始状态，然后在组件上将状态更改为选定的汽车，但我很难在减速器和组件中将其全部放在一起。我是否只为汽车对象创建一个单独的减速器？我应该列出我所拥有的组件中的每一辆车吗？

在操作文件中

export const ADD_ITEM = "ADD_ITEM";
export const REMOVE_ITEM = "REMOVE_ITEM";
export const CHANGE_CAR= "CHANGE_CAR"

export function removeItem(item) {
  return {
    type: REMOVE_ITEM,
    payload: item
  };
}
export function addItem(item) {
  return {
    type: ADD_ITEM,
    payload: item
  };
}
export function changeCar(car){ 
    return{ 
        type: CHANGE_CAR, 
       payload: car
    };
}

Reducer文件(我要在这里将其他汽车对象添加到初始状态吗？)

import {ADD_ITEM,REMOVE_ITEM , CHANGE_CAR}from "../actions"

export const initialState = {
  additionalPrice: 0,
  car: {
    price: 26395,
    name: "2019 Ford Mustang",
    image:
      "https://cdn.motor1.com/images/mgl/0AN2V/s1/2019-ford-mustang-bullitt.jpg",
    features: []
  },
  additionalFeatures: [
    { id: 1, name: "V-6 engine", price: 1500 },
    { id: 2, name: "Racing detail package", price: 1500 },
    { id: 3, name: "Premium sound system", price: 500 },
    { id: 4, name: "Rear spoiler", price: 250 },
    { id: 5, name: "Performance Exhaust", price: 800 },
    { id: 6, name: "Intake Upgrade", price: 500 },
    { id: 7, name: "Chrome Rims", price: 200 }
  ]
};

export const featuresReducer = (state = initialState, action) => {
       switch(action.type){
          case ADD_ITEM:
          return{
                additionalPrice:state.additionalPrice + action.payload.price,
                car:{
                    ...state.car, 
                    features:[...state.car.features,action.payload]
                },
                additionalFeatures: state.additionalFeatures.filter(feature => feature !== action.payload)
          }
          case REMOVE_ITEM:
              return{
                additionalPrice:state.additionalPrice-action.payload.price,
                  car:{
                      ...state.car, 
                      features:state.car.features.filter(item=>item !== action.payload)
                  },
                  additionalFeatures: [
                    ...state.additionalFeatures,
                    action.payload
                ]
            }
          
        default:
            return state
      }
  }

组件

import React from 'react';
import {connect} from "react-redux"; 

const Header = props => {
  return (
    <div>
    <strong>
    {props.car.name} 
    </strong>
      <figure className="image is-128x128">
        <img src={props.car.image} alt={props.car.name} />
      </figure>
      <h2>{props.car.name}</h2>
      <p>MSRP: ${props.car.price}</p>
    </div>
  );
};

const mapStateToProps = state => {
    return{
        car:{
        image: state.featuresReducer.car.image, 
        name: state.featuresReducer.car.name,
        price: state.featuresReducer.car.price
        }
    }
    
}
export default connect(mapStateToProps, {})(Header)

Answer 1

您可以将initial state作为包含默认汽车详细信息及其特性的数组。对于，例如：

export const initialState = [{
  additionalPrice: 0,
  car: {
    price: 26395,
    name: "2019 Ford Mustang",
    image:
      "https://cdn.motor1.com/images/mgl/0AN2V/s1/2019-ford-mustang-bullitt.jpg",
    features: []
  },
  additionalFeatures: [
    { id: 1, name: "V-6 engine", price: 1500 },
    { id: 2, name: "Racing detail package", price: 1500 }
  ]
},
{
additionalPrice: 0,
  car: {
    price: 36395,
    name: "2019 Nissan",
    image:
      "https://cdn.motor1.com/images/mgl/0AN2V/s1/2019-ford-mustang-bullitt.jpg",
    features: []
  },
  additionalFeatures: [
    { id: 1, name: "V-6 engine", price: 1500 },
    { id: 2, name: "Racing detail package", price: 1500 },
    { id: 3, name: "Premium sound system", price: 500 },
    { id: 4, name: "Rear spoiler", price: 250 },
  ]
}];

更新您的reducer以返回一个数组和您的操作，以便在有效负载中包含car名称(或car的任何唯一标识符)及其附加功能详细信息。

按名称过滤相应的汽车，并根据您的操作相应地更新reducer中的详细信息。