使用 spread 将我从 API 获得的对象添加到我的初始数据源中

Question

我有一个初始数据源：

const initState = {
  columns: [
    {
      id: 'column-2',
      title: 'column-2',
      tabs: []
    }
  ],
  columnOrder: ['column-2']
};

应用程序加载后（这是我为自己构建的 chrome 扩展），我正在从 chrome 打开选项卡，并希望将它们作为新列添加到此数据源中。

这是我的尝试：

export default (state = initState, action) => {
  switch (action.type) {
    case TABS_LOAD:
      return {
        columns: [
          { id: 'chromeTabs', title: 'chromeTabs', tabs: action.payload },
          ...state.columns
        ],
        columnOrder: [{"chromeTabs"}, ...state.columnOrder]
      };

    default:
      return state;
  }
};

我希望通过上面的函数创建如下所示的数据对象：

const state = {
 columns: [
 {
      id: 'chromeTabs,
      title: 'chromeTabs',
      tabs: 
[tab1,tab2,tab3,tab4]
    }, 
    {
      id: 'column-2',
      title: 'column-2',
      tabs: []
    }
  ],
  columnOrder: ['chromeTabs', 'column-2']
}
};

不幸的是，这对我不起作用。如果有任何指示，我将不胜感激。

Answer 1

{"chromeTabs"} 是语法错误。要添加到 columnOrder 数组，只需使用 "chromeTabs"，周围不带 {}：

return {
  columns: [
    { id: 'chromeTabs', title: 'chromeTabs', tabs: action.payload },
    ...state.columns
  ],
  columnOrder: ["chromeTabs", ...state.columnOrder]
  // No {} -----^-----------^
};

实例：

const initState = {
  columns: [
    {
      id: 'column-2',
      title: 'column-2',
      tabs: []
    }
  ],
  columnOrder: ['column-2']
};

const TABS_LOAD = "tabs-load";

const f = (state = initState, action) => {
  switch (action.type) {
    case TABS_LOAD:
      return {
        columns: [
          { id: 'chromeTabs', title: 'chromeTabs', tabs: action.payload },
          ...state.columns
        ],
        columnOrder: ["chromeTabs", ...state.columnOrder]
      };

    default:
      return state;
  }
};

console.log(f(initState, {type: TABS_LOAD}));

.as-console-wrapper {
  max-height: 100% !important;
}

使用 spread 将我从 API 获得的对象添加到我的初始数据源中

Using spread to add an object that I get from API into my initial datasource

javascript

ecmascript-6

spread-syntax

redux