React Native Redux组件在Redux状态更改时不重新渲染

Question

我正在React Native中开发一个购物篮组件。篮子的内容和价格保存在全局redux存储中。当用户选择一项商品时，将发送一个动作将该商品添加到购物篮中并更新购物篮总价。

UI不会在这个全局状态改变时得到更新。

我的减速机

const INITIAL_STATE = {
basket: [],
basketPrice: 0,
};
const mainReducer = (state = INITIAL_STATE, action) => {
const stateCpy = state;
switch (action.type) {
case 'SET_BASKET':
stateCpy.basket = action.payload
return stateCpy;
case 'ADD_TO_BASKET':
stateCpy.basket.push(action.payload)
return stateCpy
case 'REMOVE_FROM_BASKET':
let tempItems = stateCpy.basket
for (var x = 0; x < stateCpy.basket.length; x++) {
if (stateCpy.basket[x]._id === action.payload) {
tempItems.splice(x, 1)
break;
}
}
stateCpy.basket = tempItems
return stateCpy
case 'SET_BASKET_PRICE':
stateCpy.basketPrice = action.payload
console.log(stateCpy.basketPrice)
return stateCpy
default:
return state
}
};
export default mainReducer

我的行为

const setBasket = basket => ({
type: 'SET_BASKET',
payload: basket,
});
const addToBasket = item => ({
type: 'ADD_TO_BASKET',
payload: item,
});
const removeFromBasket = item_id => ({
type: 'REMOVE_FROM_BASKET',
payload: item_id,
});
const setBasketPrice = price => ({
type: 'SET_BASKET_PRICE',
payload: price,
});
export default actions = {
setBasket,
addToBasket,
removeFromBasket,
setBasketPrice
}

我的UI组件

... 
import { useSelector, useDispatch } from 'react-redux'
export const RestaurantView = ({ navigation, route }) => {
const basket = useSelector((state) => state.basket)
const basketPrice = useSelector((state) => state.basketPrice)

const dispatch = useDispatch()
...
function calcBasketPrice(){
let tempBasketPrice = 0
basket.forEach(element => {
tempBasketPrice += element.price
});
return tempBasketPrice

}
function addToBasket(item) {
dispatch(actions.setBasketPrice(calcBasketPrice() + item.price))
dispatch(actions.addToBasket(item))
}

return ( <View>
<ItemCard onPress={addToBasket}> </ItemCard>
<Text style={{ textAlign: "right", padding: 15, fontSize: 20 }}> {basketPrice}</Text>
</View>)
}

当将basketPrice记录到reducer中的控制台时，它会在每次press/dispatch上记录正确的、更新的值，但UI中没有变化。当更改局部状态以强制呈现时，它会使用全局存储中的正确值进行呈现。

Answer 1

您的stateCpy变量实际上不是副本，而只是对state的引用-因此您的reducer实际上是修改旧的redux状态，而不是创建一个新的。

因为这是一种非常过时的Redux风格，在现代ReduxcreateSlice简化器中，修改state完全可以，我建议你不要在传统Redux中修复这个问题，而是看看现代Redux -它也不太容易出错，大约是你用传统Redux编写的代码的1/4。重写你的reducer不是很多工作，从长远来看，你会真正受益于(自2019年以来)的新风格。

查看Redux官方教程