添加Redux状态值

Question

我正试图将两个单独的价格合并为一个总价。我已经存储了两个单独的价格状态，并使用独立的还原器正确更新，但我需要一种方法将这两个动态值组合成第三个总价状态。

import React, {useState} from "react";
import { useSelector, useDispatch } from "react-redux";
const planPrice = useSelector(state => state.planPrice);
const repairPrice = useSelector(state => state.repairPrice);
//Use the state hook to store the Total Price
const [totalPrice, setTotalPrice] = useState(0);
const [items, setItems] = useState([]);
function addItem (newItem) {
setItems((prevItems) => {
return [...prevItems, newItem];
});
//Update the Plan Price
if ({plan}.plan === "Premium") {
dispatch(addItemPremium());
} else if ({plan}.plan === "Basic") {
dispatch(addItemBasic());
}
//Update the Repair Price
if (newItem === "Small Chip") {
dispatch(addSmallChip());
} else if (newItem === "Big Chip") {
dispatch(addBigChip());
}
// //Update the Total Price
setTotalPrice({planPrice} + {repairPrice});
}

使用Redux这样做可能吗？还是我的做法不对？

Answer 1

如果您有派生状态，您应该考虑使用选择器。这些函数将状态作为参数，并返回派生的状态值。

例如：

function totalPrice(state) {
return state.price1 + state.price2;
}

如果你需要在mapStateToProps中使用它，你可以按如下方式使用：

const mapStateToProps = state => ({
price: totalPrice(state)
})

如果您正在使用钩子，则可以使用useSelector钩子：

const price = useSelector(totalPrice);

有一些库(例如，reselect(可以帮助您创建具有缓存的可组合选择器，以提高效率。

请注意，您应该使用选择器而不是存储冗余状态的原因，正如您可能已经直觉到的那样，是冗余状态可能会不同步，然后您就会被冲洗掉。但是，如果您有一个计算总价的函数，它将始终与各个状态部分同步。