Reduxでのアレイ状態のクリア

Question

Reduxでアレイ状態をクリアするにはどうすればよいですか？私は空の配列の初期状態を持っており、物事が追加されています。私はそれだけで明確なアクションを持つようにしたい、私は、次の方法を試してみましたが、それは私に「action.payload」私はCLEAR_THINGSアクションに与えるについて「予期しないトークン」エラー与える：

export default (state=[], action) => { 
switch (action.type) { 
    case "RECEIVE_THING": 
     return [ 
      ...state, 
      action.payload 
     ]; 
    case "CLEAR_THINGS": 
     return { 
      ...state, 
      action.payload // payload here is []... 
     }; 
    default: 
     return state; 
}} 

をまた投げますaction.payloadの代わりに[]を使用するとエラーが発生します。

Answer 1

export default (state=[], action) => { 
switch (action.type) { 
    case "RECEIVE_THING": 
     return [ 
      ...state, 
      action.payload 
     ]; 
    case "CLEAR_THINGS": 
     return []; 
    default: 
     return state; 
}} 

RECEIVE_THINGアクションが配列である状態を返すために、オブジェクトのスプレッド表記法を使用しています（[]）新しいアイテムを以前の状態（[...state]）を含み、それに追加している（[...state, action.payload] ）。この新しい項目に使用されるキー/プロパティー名は、単純に配列の次のインデックスです。結局のところ、配列です。 CLEAR_THINGSのためのあなたのコードで

古い状態を含むオブジェクト（{}）を作成している（それは['item1']だったと言う）と、それは{ '0': ['item1'] }のように見えます。次に、object shorthand notationを使用して状態を追加しますが、これには単一の識別子（1つの単語）を使用する必要がありますが、プロパティにアクセスするにはドット付き概念（修飾識別子）を使用しています。あなたはaction.payloadという名のついた特質を教えるようなものですが、これは違法です。これがあなたの誤りの原因です。配列の場合には、キーが配列のインデックスから派生しているので、この場合は値だけが必要なためです。

あなたがしたいことは、常に同じ種類のオブジェクト、場合によっては配列を返します。 return {で始めると、あなたはすでに間違った方向に行きます。

Answer 2

キーはピリオドが含まれており、それはキーがどうあるべきかは不明ですので、これはあなたのケースで構文エラーが発生し

{"thing": thing} 

に操作

{thing} 

transpilesためES6の速記。多分あなたはこのようなことをしようとしますか？

return { 
    action: { 
     payload: action.payload 
    } 
} 

しかし、これは当面の問題を解決していません：あなたはこのアクションで、配列をクリアしたい場合は、あなたが次の状態への既存の状態を拡大するべきではありません。代わりに、既存の状態と同じ形のものを返すだけで、意味的に空の意味を持ちます（この場合は空の配列です）。私が何をしたいことはあなたがちょうどあなたの「CLEAR_THINGS」ハンドラに戻り、空の配列すべき

case "RECEIVE_THING": 
    return [ 
     ...state, 
     action.payload 
    ]; 
case "CLEAR_THINGS": 
    return []; 

Answer 3

だと思う：あなただけの既存の状態を参照する必要はありませんすべてをクリアしたいので

export default (state=[], action) => { 
switch (action.type) { 
    case "RECEIVE_THING": 
     return [ 
      ...state, 
      action.payload 
     ]; 
    case "CLEAR_THINGS": 
     return []; 
    default: 
     return state; 
}} 

、新しい状態を空の配列に設定したいだけです。

言及する価値のある別のことは、おそらくオブジェクトに配列を入れ子にすることです。あなたのレデューサーが将来もっと複雑になるなら、あなたが持っているようにこの方法で機能を追加するのは難しいでしょう。このアプローチでは、必要に応じてさらに複雑になることができます。もちろん、減速機を追加することもできますが、私は減速機をこのように柔軟にするのが好きです。これは次のようになります。

export default (state = { myArray: [] }, action) => { 
switch (action.type) { 
    case "RECEIVE_THING": 
     return { 
      ...state, 
      myArray: state.myArray.concat([action.payload]), 
     }; 
    case "CLEAR_THINGS": 
     return { 
      ...state, 
      myArray: [], 
     }; 
    default: 
     return state; 
}}