reduxで配列に要素を追加・削除する方法

@iwasaki 112views 更新:2017年2月28日

配列への要素の追加、削除は以下のように行うようです。

const initialState = {
  selectedIds: [],
};

function addItem(array, item) {
  return Array.from(new Set([...array, item]));//重複データが入らないようにするための対応
}

function removeItem(array, item) {
  return array.filter((v, i) => v !== item);
}

export default handleActions(
  {
    ADD_ITEM: (state, action) => ({
      ...state,
      selectedIds: addItem(state.selectedIds, action.payload),
    }),
    REMOVE_ITEM: (state, action) => ({
      ...state,
      selectedIds: removeItem(state.selectedIds, action.payload),
    }),
  },
  initialState,
);

state.selectedIds.push()みたいなことはやってはいけないらしいので、新しい配列を作っています。

参考

http://redux.js.org/docs/recipes/reducers/ImmutableUpdatePatterns.html

http://qiita.com/_shimizu/items/b8eac14f399e20599818

http://qiita.com/cocottejs/items/7afe6d5f27ee7c36c61f

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません