Object.assign()遇到的問題分析

概念

Object.assign() 方法能夠把任意多個的源對象自身的可枚舉屬性拷貝給目標對象，而後返回目標對象。語法以下：

Object.assign(target, ...sources)

Object.assign 方法只會拷貝源對象自身的而且可枚舉的屬性到目標對象身上。

淺拷貝

使用這個方法有個最須要注意的地方就是它是淺拷貝，也就是對於嵌套對象來講使用Object.assign會直接替換掉。我在redux的項目中處理reducer中常常須要改變嵌套對象中的某個屬性時候，最開始沒有注意就出了錯誤。

下面是個人reducer代碼:

const initialState = {
    mainMenu: "marketIndex",
    selectMenu: "equityMarket",
    externalInfoEchartsImage: "line",
    equityMarket: {
        tableData: [],
        refreshTable: false,
        tableFetching: true,
        rowIndex: 0,
        echartsData: [],
        echartsFetching: true,
    },
}

export default function(state = initialState, action) {
    switch (action.type) {
        case types.SWITCH_EXTERNAL_MAIN_MENU:
            return Object.assign({}, state, {
                mainMenu: action.mainMenu 
            });
        case types.SELECT_EXTERNAL_SUB_MENU:
            return Object.assign({}, state, {
                selectMenu: action.selectMenu 
            });
        case types.REFRESH_EXTERNAL_DATA:
            return {
                ...state,
                [action.selectMenu]: {
                    ...state[action.selectMenu],
                    refreshTable: action.refreshTable,
                }
            };
            
            ...

像mainMenu: "marketIndex"這種使用簡單數據類型的，就能夠直接使用Object.assign來改變屬性的值。

Object.assign({}, state, {
         mainMenu: action.mainMenu 
    });

而有嵌套數據類型的equityMarket

equityMarket: {
        tableData: [],
        refreshTable: false,
        tableFetching: true,
        rowIndex: 0,
        echartsData: [],
        echartsFetching: true,
    },

若是直接使用

Object.assign({}, state, 
        equityMarket:{
         refreshTable: action.refreshTable,
    });

那麼就是直接將整個equityMarket替換了，所以須要用...擴展操做符來實現，或者用一些其餘的插件等。

參考資料

1.詳細的用法介紹