реагировать на избыточность - сбросить другое состояние

Question

Я новичок в реактивной редукции.

Я реализовал как:

Магазин:

import { createStore } from "redux";

const initialState = {
    layersFlag : {
        baseDistrictADhabi: "none", 
        baseDistrictAAin: "none"
    }
};

const reducer = (state = initialState, action)=>{
    switch (action.type) {
        case "layerChange":
            return Object.assign({}, state, {
                ...state, 
                layersFlag : { 
                    baseDistrictADhabi: action.payload.baseDistrictADhabi,
                    baseDistrictAAin: action.payload.baseDistrictAAin
                }
            })
        default:
            return state;
    }
}

const Store = createStore(reducer, initialState);

export default Store;

HomeScreen:

<Text> {this.props.baseDistrictADhabi} </Text>
<Text> {this.props.baseDistrictAAin} </Text> 

const mapStateToProps = function(state) {
    return {
        baseDistrictADhabi: state.layersFlag.baseDistrictADhabi, 
        baseDistrictAAin: state.layersFlag.baseDistrictAAin
    }
}

export default connect(mapStateToProps)(HomeScreen);

Это работает, но проблема в том, что когда я меняю состояние baseDistrictADhabi, тогда baseDistrictAAin (undefined) получает сброс.

Answer 1

Если ваше действие возвращает только значение, которое вы хотите обновить, вы можете просто распространить его на объект layerFlag.

Измените ваш редуктор на следующее:

    case "layerChange":
        return {
            ...state, 
            layersFlag : {
                ...state.layersFlag,
                ...action.payload
            }
        }

Это будетсохраните все предыдущие ключи в вашем объекте LayersFlag, как они есть, и обновите только тот, который возвращается в действии.