我有一个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)
答案 0 :(得分:0)
您可以将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
中的详细信息。