JavaScriptのオブジェクトの中身を破壊的ではない方法で書き換えたいです。

Question

実現したいこと

以下のようなオブジェクトがあります。

todos[
{value: "sample1", flag: true},
{value: "sample2", flag: true}
]

これを以下のように、flagをfalseに変更したいです。

todos[
{value: "sample1", flag: true},
{value: "sample2", flag: false}
]

action.payloadはtodosの添え字を保持しています。

const todo = handleActions(
  {

    [Actions.addTodo]: (state, action) => ({
      ...state,
      todos: [...state.todos, { value: action.payload, flag: true }],
      value: INITIAL_STATE.value,
    }),

    [Actions.completedTodo]: (state, action) => ({
      ...state,
      todos: ????????
    }),
  },
  INITIAL_STATE
);

Comments

[maisumakun]

flagをfalseに変えるものはどうやって特定しますか？

[退会済みユーザー]

action.payloadがtodosの添え字を保持しています。これで特定することは可能ですか?
新たにidを追加することも可能ではあります。

Answer 1

こんにちは

配列のインデクス（action.payload.indexとします。）で特定する場合は、以下でよいかと思います。

[Actions.completedTodo]: (state, action) => ({
  ...state,
  todos: state.todos.map((todo, i) => ({ ...todo, flag: i === action.payload.index ? false : todo.flag }))
}),

以下は上記のコードを試すためのサンプルです。

• 動作確認用サンプル： https://codepen.io/jun68ykt/pen/VwvPdwJ?editors=0012

todos の要素にユニークなプロパティ id を追加して、これによって要素を指定するのであれば、以下です。

[Actions.completedTodo]: (state, action) => ({
  ...state,
  todos: state.todos.map(todo => ({ ...todo, flag: action.payload.id === todo.id ? false : todo.flag }))
}),

以下は上記のコードを試すためのサンプルです。

• 動作確認用サンプル： https://codepen.io/jun68ykt/pen/PoPWejr?editors=0012

一行で書くと長くなって読みにくくなるので、 (state, action) => の後を、return を書く形にすれば、以下のようにも書けます。

[Actions.completedTodo]: (state, action) => {
  const todos = state.todos.map(todo => ({ 
    ...todo, 
    flag: action.payload.id === todo.id ? false : todo.flag
  }));
  return { ...state, todos };
},

追記

flag: action.payload.id === todo.id ? false : todo.flag

は、三項演算子を使わずに、以下のようにも書けて、少し短くできます。

flag: action.payload.id !== todo.id && todo.flag

追記2

アクションオブジェクトの構造について、action.payload 自体が、value だったりインデクスだったりしてもよいのですが、上記の回答のとおり、payloadをオブジェクトにして、その中に値をプロパティとして持つ形もよく使われます。以下のような形です。

{
  type: 'ADD_TODO',
  payload: {
    text: 'Do something.'  
  }
}

引用元: https://github.com/redux-utilities/flux-standard-action#example

Comments

[退会済みユーザー]

action.payloadとtodo.idが===なら一致した要素だから、そこを三項演算子で変更するということですね。
いつもありがとうございます！

[jun68ykt]

どういたしまして????
はい。そうです。
reducer で、state に含まれる配列のプロパティを更新するときに、
・大枠でmap を使い、
・更新したいプロパティ以外を変えないために、スプレッド構文( ... )を使い、
・細かいところの条件分岐のために、三項演算子、&&、 || を使う。
というパターンはよくあります。