即使调用了 reducer，Redux 状态也不会更新

Question

我正在构建一个餐厅类型的应用程序。 我正在使用 redux 来处理状态。 我在顶角有一个图标，用于跟踪购物车中的商品数量。 当状态包含一个数组时，这有效并被正确更新。 从那以后，我出于个人原因将状态更改为地图，并且一切正常，除了数字不再更新。 我可以看到减速器仍在工作，但是数字没有像以前那样更新。 我试图寻找错误，但仍然找不到出错的地方。

我的减速机：

import { MenuAction } from "../components/Utils";

const CartItems = (state : Map<Item, number> = new Map(), action: MenuAction) : Map<Item, number>  => {
    console.warn(state);
    switch (action.type) {
        case 'ADD_TO_CART':
            if (state.has(action.payload)) {
                return state.set(action.payload, state.get(action.payload) + 1);
            } else {
                return state.set(action.payload, 1);
            }
        case 'REMOVE_FROM_CART':
            if (state.has(action.payload)) {
                if (state.get(action.payload) == 1) {
                    state.delete(action.payload);
                    return state;
                } else {
                    return state.set(action.payload, state.get(action.payload) - 1);
                }
            }
    }
    return state
}

export default CartItems


The component with the icon that displays the number:


const ShoppingCartIcon = (props: any) => (
    <View style={[{ padding: 5 }, Platform.OS == 'android' ? styles.iconContainer : null]}>
        <View>
            <Text style={{color: 'white', fontWeight: 'bold'}}>
                {Utils.getCartTotal(props.cartItems)}
            </Text>
        </View>
        <Icon onPress={() => props.navigation.navigate('Cart')} name="ios-cart" size={30} />
    </View> 
)

const mapStateToProps = (state: Map<Item, number>) => {
    return {
        cartItems: state
    }
}

export default connect(mapStateToProps)(withNavigation(ShoppingCartIcon));

Answer 1

问题是你正在做一个违反 Redux 原则的state-mutation 。 尽管状态值在您的处理代码中似乎已更新，但更改是对引用中的相同初始对象进行的。 这就是使用new Map()作为初始状态的问题，你最终会使用像.set()这样的改变状态的方法：

state.set(action.payload, state.get(action.payload) + 1)

Redux 强调不变性的概念。 https://redux.js.org/recipes/structuring-reducers/immutable-update-patterns 。 因为不要对状态进行更改，因为它不会注册为新数据 - 因此它不需要使用更新后的数字重新呈现您的购物车组件。 为了让你的连接组件重新渲染，我们需要一个全新的 redux-state。

为了实现您想要的结果，您应该将其恢复为一个简单的数组[]并使用.map()和.filter()来帮助您创建一个全新的状态副本。