Reactjs 将嵌套对象重新复制为状态-这是否可能/最佳

我是Redux的新手，所以请容忍我。我想知道下面这样的事情是否可能和/或是最佳的，如果是的话，如何更新reducer中的嵌套对象值

const initialState = {
  banner: {
    backgroundColor: 'black',
    text: 'Some Title',
    textColor: 'white',
    image: null
  },
  nav: {
    mainOpen: false,
    authOpen: false,
  }

  ...
}

然后在减速器中，这样的东西似乎不起作用

export default function reducer(state = initialState, action = {}) {
  const {type, data} = action;
  switch (type) {
    case SET_BANNER_TEXT:
      return {
        ...state,
        banner.text: data //<-- ****THIS FAILS WITH UNEXPECTED TOKEN!!!****
      }

    ...
}

导出默认函数缩减器（state=initialState，action={}）{
常量{type，data}=action；
开关（类型）{
案例集\u横幅\u文本：
返回{
……国家，
banner.text:data/由于您正在更新对象的密钥，请尝试使用此更新密钥

const state = {
  ...initialState,
  banner: {
    ...initialState.banner, // extend
    text: 'newText'
  }
}

也就是说

var state = _extends({}, initialState, {
    banner: _extends({}, initialState.banner, {
        text: 'newText'
    })
});

在ES5中

检查这个

编辑：如下面的注释所述，如果上面使用了代码，它将覆盖整个banner对象。您可以在此线程中使用
对象。assign（）
尝试其他答案，并克隆
banner
对象。如果您仍然要使用排列运算符，我更新了我的答案

我认为对于深度嵌套的状态，最好使用特定的约简

export function rootReducer(state = initialState, action) {
    switch (action.type) {
    case SET_BANNER_TEXT:
    case SET_BANNER_BG:
        return Object.assign({}, state,
            {
                banner: bannerReducer(state.banner, action)
            }
        );
    // ...
    default:
        return state;
    }
}

function bannerReducer(state, action) {
    switch (action.type) {
    case SET_BANNER_TEXT:
        return Object.assign({}, state, {text: action.payload});
    case SET_BANNER_BG:
        return Object.assign({}, state, {backgroundColor: action.payload});
    // ...
    default:
        return state;
    }
}

由于您正在更新对象的密钥，请尝试使用此更新密钥

const state = {
  ...initialState,
  banner: {
    ...initialState.banner, // extend
    text: 'newText'
  }
}

也就是说

var state = _extends({}, initialState, {
    banner: _extends({}, initialState.banner, {
        text: 'newText'
    })
});

在ES5中

检查这个

编辑：如下面的注释所述，如果上面使用了代码，它将覆盖整个banner对象。您可以在此线程中使用
对象。assign（）
尝试其他答案，并克隆
banner
对象。如果您仍然要使用排列运算符，我更新了我的答案

我认为对于深度嵌套的状态，最好使用特定的约简

export function rootReducer(state = initialState, action) {
    switch (action.type) {
    case SET_BANNER_TEXT:
    case SET_BANNER_BG:
        return Object.assign({}, state,
            {
                banner: bannerReducer(state.banner, action)
            }
        );
    // ...
    default:
        return state;
    }
}

function bannerReducer(state, action) {
    switch (action.type) {
    case SET_BANNER_TEXT:
        return Object.assign({}, state, {text: action.payload});
    case SET_BANNER_BG:
        return Object.assign({}, state, {backgroundColor: action.payload});
    // ...
    default:
        return state;
    }
}

我对redux也有点陌生，所以我不能对“最佳实践”说太多。我个人倾向于使用一个新的减速机，因为您有一些特定的操作，例如
SET\u BANNER\u TEXT
（颜色、img等？），这些操作修改了状态树的特定部分，而其他什么都没有。通过将减速机拆分来简化减速机，（即使有很多），这将使事情更容易沿着道路追踪

从语法上讲，你可以通过以下方式实现你想要做的事情：

export default function reducer(state = initialState, action = {}) {
  const {type, data} = action;
  switch (type) {
    case SET_BANNER_TEXT:
      const newBannerState = Object.assign({}, state.banner, {text: data});
      return Object.assign({}, state, {banner: newBannerState});
}

我对redux也有点陌生，所以我不能对“最佳实践”说太多。我个人倾向于使用一个新的减速机，因为您有一些特定的操作，例如
SET\u BANNER\u TEXT
（颜色、img等？），这些操作修改了状态树的特定部分，而其他什么都没有。通过将减速机拆分来简化减速机，（即使有很多），这将使事情更容易沿着道路追踪

从语法上讲，你可以通过以下方式实现你想要做的事情：

export default function reducer(state = initialState, action = {}) {
  const {type, data} = action;
  switch (type) {
    case SET_BANNER_TEXT:
      const newBannerState = Object.assign({}, state.banner, {text: data});
      return Object.assign({}, state, {banner: newBannerState});
}

这将覆盖banner的所有其他属性。如果需要保留这些属性，请使用banner:{…initialState.banner，text:'new text'}@JHurrah谢谢！忘记考虑这一点了。：）我太习惯于分离还原符，很少遇到覆盖问题。这将覆盖banner的所有其他属性。如果需要保留它们，请使用banner:{…initialState.banner，text:'new text'}@JHurrah谢谢！忘了考虑这一点。：）我太习惯于分离减缩器，很少遇到覆盖问题。