2017-01-28 6 views
2

Redux不変配列状態に関する助けが必要です。私は行動からオブジェクトの配列を取得し、減速機に渡しています。 私のレデューサーファイルでは、配列が変更されず、毎回新しいコピーが作成されます。React + Redux Immutable配列Reducer

私が直面している問題は、新しい状態の新しい配列を追加し続けるような、常に以前の+新しい配列(正しい)です。最後の更新配列が必要です。私は反応するために渡さなければならないので。

export default (state = {}, action) => { 
    switch (action.type) { 
     case EVT.LB_FOLLOWING_CHANGE: 
      return [ 
       ...state, 
       action.payload 
      ]; 
      break; 
     default: 
      return state; 
    } 
}; 
+0

は、あなたの行動が何をしているかによっていくつかの違いがあります。あなたが言ったことに基づいて、私はあなたの行動が戻ってきていると思います(action.payload)あなたの状態になることを望んでいます - そうですか?もしそうなら、 'return [... state、action.payload]'を 'return [action.payload]'に変更してみてください。 –

+0

私はあなたが戻ってきたことが新しい状態であり、あなたのペイロードにあなたが状態で望むものがすべて含まれていれば、上記のことがうまくいくはずであることを明確にすべきです。戻り値の先頭に '... state'がある場合は、最初に状態の現在の値を返してから、action.payloadを追加します。だからこそあなたはいつもあなたの新しい配列をあなたの前のものに加えています。 –

答えて

0

ただ、次の操作を行います。

case EVT.LB_FOLLOWING_CHANGE: 
     return [action.payload]; 
1

あなたが広がり演算子...を使用しているので、あなたは新しい+以前の配列を取得しています。 MDN資料から、https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Spread_operator

拡散構文式がや(割当を構造化代入するための)複数の変数(配列リテラルの)複数の要素(関数呼び出しのための)複数の引数が期待される場所に拡張することを可能にします。

あなたのケースでは、stateの前にスプレッド演算子を使用すると、状態配列内のすべての値が返される配列に追加されます。アクションで受け取った値を返すには、[action.payload]を返すだけです。

上記のドキュメントのリンクを参照して、スプレッド構文を正しく使用する方法の例をご覧ください。