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

问题是您正在执行state-mutation，这违反Redux原则。尽管状态值在您的后续代码中似乎已更新，但是更改是针对相同的初始对象进行的。这就是使用new Map()作为初始状态的问题，最终您使用的是使状态发生变化的方法，例如.set()：

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

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

要获得所需的结果，应将其恢复为简单的数组[]，并使用.map()和.filter()之类的方法来帮助您创建状态的全新副本。

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

1 个答案: