React Redux - логическое значение не определено

Question

Я хочу обработать простое логическое значение в моем магазине Redux. Но это значение приводит к неопределенности при каждом событии отправки. Кто-нибудь из вас понимает, почему?

У меня есть следующие настройки:

reducer.js

const initialState = {
    canSwipe: true
};

export default function rootReducer(state = initialState, action) {
    switch (action.type) {
        case CAN_SWIPE: {
        console.log(action.payload.canSwipe) // This logs true or false - works!
        return action.payload.canSwipe
        }
        default:
            return state;
    }
}

actions.js

export const setSwipeState = canSwipe => ({ type: CAN_SWIPE, payload: { canSwipe } });

компонентдля отправки

function MapOverlay({setSwipeState}) {
    const zoom = 5;
    return (
        <Map
            onMovestart={() => setSwipeState(false)}
            onMoveend={() => setSwipeState(true)}
        >
            {...}
        </Map>
    )
}

export default connect(null, {setSwipeState})(MapOverlay);

Answer 1

Редуктор должен возвращать данные, которые должны соответствовать вашему начальному состоянию:

const initialState = {
    canSwipe: true
};

Таким образом, вам необходимо изменить редуктор для соблюдения этой структуры:

switch (action.type) {
        case CAN_SWIPE: {
        console.log(action.payload.canSwipe) // This logs true or false - works!
        return {canSwipe: action.payload.canSwipe}
        }