Использование распространения для добавления объекта, полученного из API, в исходный источник данных. - PullRequest
Новая
       53

Использование распространения для добавления объекта, полученного из API, в исходный источник данных.

0 голосов
/ 21 ноября 2018

У меня есть исходный источник данных: 

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']
}
};

К сожалению, это не сработало длямне.Буду признателен за любые указания.

1 Ответ

0 голосов
/ 21 ноября 2018

{"chromeTabs"} - синтаксическая ошибка.Чтобы добавить в массив columnOrder, просто используйте "chromeTabs" без {} вокруг него: 

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

Live Пример: 

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;
}
...