У меня есть одностраничное приложение 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)