Состояние Redux не обновляется, хотя вызывается редуктор

Question

У меня есть приложение типа ресторана, которое я создаю.Я использую избыточность для обработки состояния.У меня есть значок в верхнем углу, который отслеживает количество товаров в корзине.Это работало и обновлялось должным образом, когда состояние содержало массив.С тех пор я изменил состояние на Карту только по своим личным причинам, и все работает, КРОМЕ номера больше не обновляется.Я вижу, что редуктор все еще выполняет свою работу, но число не обновляется, как раньше.Я пытался найти ошибку и до сих пор не могу найти, где она идет не так.

Мой редуктор:

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. Как в, не вносите изменения в состояние, потому что он не регистрируется как новые данные - поэтому он не находит необходимости повторно визуализировать ваш компонент тележки с обновленными номерами.Для повторного рендеринга вашего подключенного компонента нам нужно совершенно новое состояние приращения.

Чтобы достичь желаемого результата, вам нужно вернуть его обратно в простой массив [] и использовать такие методы, как .map()и .filter(), который поможет вам создать совершенно новую копию состояния.