использование оператора распространения для обновления состояния на разных уровнях

Question

У меня есть состояние редуктора, инициализированное следующим образом:

state = {
    name: ""
    authenticationObj: {
        userContactInfo: {
            billingAddress: {
                billingCountry: undefined,
                billingAddress1: undefined,
                billingAddress2: undefined,
                billingCity: undefined,
                billingPostalCode: undefined,
                billingPhoneNumber: undefined,
                billingFirstName: undefined,
                billingLastName: undefined,
                billingPersonalEmail: undefined,
                billingSelectedRegion: undefined
            },
        },
        subscriptions: [],
        fullName: "",
        subscriberDefaultPhoneNumber: ""
    }
}

Теперь мне нужно использовать оператор распространения для обновления состояния, и вот что у меня работает:

case SET_SUBSC_LIST:
    state = { ...state,
        authenticationObj: { ...state.authenticationObj,
            subscriptions: action.payload.subscriptions
        }
    }

* 1006Но что, если я хочу обновить атрибуты на разных уровнях.Например, если мне нужно обновить подписки, а также billingAddress1, который одновременно находится внутри billingAddress, как мне этого добиться?

Answer 1

Вы можете использовать метод слияния из lodash вместо оператора распространения, чтобы было легче читать.

case SET_SUBSC_LIST:
    state = _.merge(state, { authenticationObj: {
            subscriptions: action.payload.subscriptions
        }
    }

Answer 2

state = {
  ...state,
  authenticationObj: {
    ...state.authenticationObj,
    userContactInfo: {
      ...state.authenticationObj.userContactInfo,
      billingAddress: {
        ...state.authenticationObj.userContactInfo.billingAddress,
        billingAddress1: action.payload.billingAddress1   
      }
    },
    subscriptions: action.payload.subscriptions
  }
};

Answer 3

Hamed Minaee, вы можете обновлять различные поля с помощью оператора распространения, но, как отметил samb102, вы должны использовать setState:

//you can do something like this:
this.setState(prevState => ({ ...prevState,
        authenticationObj: { ...prevState.authenticationObj,
            subscriptions: action.payload.subscriptions,
            userContactInfo: {
                ...prevState.authenticationObj.userContactInfo,
                billingAddress: {
                    ...prevState.authenticationObj.userContactInfo.billingAddress,
                    billingAddress1: "your new state value",
                }
            }
        }
    }))

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

const { authenticationObj } = this.state;

authenticationObj.subscriptions = action.payload.subscriptions;
authenticationObj.userContactInfo.billingAddress.billingAddress1 = "your new state value";

this.setState({ authenticationObj: authenticationObj });

Answer 4

Если вы хотите обновить как подписки, так и billingAddress1, вы можете сделать следующее:

    case SET_SUBSC_LIST:
    state = { ...state,
        authenticationObj: { ...state.authenticationObj,
            subscriptions: action.payload.subscriptions,
            userContactInfo:{
                ...state.authenticationObj.userContactInfo,
                billingAddress: {
                    ...state.authenticationObj.userContactInfo.billingAddress,
                    billingAddress1: action.payload.billingAddress1
               }
            }

        }
    }

Вам нужно распространять спред, чтобы вы сохраняли исходный объект и изменяли только те поля, которые вы намереваетесь.