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.詳細的用法介紹