鍍金池/ 問答/HTML/ 關(guān)于reducer的深拷貝問題

關(guān)于reducer的深拷貝問題

const initState = {
  menus: {
    msg: '',
    status: Status.LOADING,
    data: []
  },
  tenants: {
    msg: '',
    status: Status.LOADING,
    data: []
  }
}
    case Actions.FETCH_MENU_SUCCESS:
      {
        return {
          menus: {
            msg: action.result.Status.MessageKey,
            status: Status.SUCCESS,
            data: action.result.Data
          },
          ...state
        };
      }

這樣寫的話，會沖掉我的tenants，而且menus的數(shù)據(jù)還是沒有變化。我該怎么方便的合并數(shù)據(jù)呢？

回答
編輯回答
無標(biāo)題

從后向前合并的。參考 Object.assgin()方法

case Actions.FETCH_MENU_SUCCESS:
      {
        return {
          ...state,
          menus: {
            msg: action.result.Status.MessageKey,
            status: Status.SUCCESS,
            data: action.result.Data
          }
        };
      }
2018年2月23日 01:23
編輯回答
避風(fēng)港

首先指出一點(diǎn)，Redux的reducer是淺復(fù)制。
沖掉的原因，是因?yàn)闇\復(fù)制沒有放在最更新數(shù)據(jù)前，把...state放在前面就好了。

Redux作者Dan Abramov推薦用Object.assign() and ...spread淺復(fù)制來在reducer中更新狀態(tài)：

Avoiding Object Mutations with Object.assign() and ...spread

所以淺復(fù)制實(shí)現(xiàn)方法：
原生方式：var newObj = Object.assign({},someobj);或者var newObj = {...someobj};
jQuery方式：var copiedObject = jQuery.extend({}, originalObject)

再說下與本問題無關(guān)的深復(fù)制：
原生方式：var newObj= JSON.parse(JSON.stringify(someobj));
jQuery方式：var copiedObject = jQuery.extend(true, {}, originalObject)

2017年8月29日 02:20