时间戳

首页 > 解决方案 > 如何在 Redux Reducer 的对象数组中将状态更改为不同的对象

reactjs - 如何在 Redux Reducer 的对象数组中将状态更改为不同的对象

问题描述

我有一个 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
    };
}

减速器文件（我是否在此处将其他汽车对象添加到初始状态？）

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)

标签： reactjsreduxreact-reduxreducers

解决方案

您可以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以返回一个数组和您的操作，以在有效负载中包含汽车名称（或汽车的任何唯一标识符）及其附加功能详细信息。

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

推荐阅读