次のレデューサーでの広がりと消滅の使用を理解してください

Question

私はこのレデューサーの仕組みを頭に入れて、REMOVE_ITEMを自分のアクションハンドラーに追加できるようにしています。私の現在の試みは、state.filterは関数エラーではありません。

// ------------------------------------ 
// Action Handlers 
// ------------------------------------ 
const ACTION_HANDLERS = { 
    [GET_POSTS]: (state, action) => ({ ...state, ...action.payload}), 
    [PICK_ITEM]: (state, action) => ({ ...state, ...action.payload}), 
    [REMOVE_ITEM]: (state, action) => ({...state.filter(item => item !== action.payload)}) // <-- NOT WORKING 
} 

// ------------------------------------ 
// Reducer 
// ------------------------------------ 
const initialState = [] 
export default function contentReducer (state = initialState, action) { 
    const handler = ACTION_HANDLERS[action.type] 

    return handler ? handler(state, action) : state 
} 

私は普及と破壊が何をしているかについてはあまりよく分かりません。私が正しく理解すれば、広がりが私たちに州のコピーされたバージョンを与えますので、私たちはそれを変更していませんが、どのように次のようになりますか：handler(state, action)は新しい状態を作成しますか？

Answer 1

例えば、それぞれのアクション[GET_POSTS]は、stateとaction.payloadに広がり、結果の値を返します。

はい、{...stateビットは、stateのすべてのプロパティを新しいオブジェクトに展開します。

この構文は、その中でもObject.assignまたは_.mergeのようであるが、右へのパラメータは、同じプロパティであれば、過書き込み（左に既存のパラメータと合併。

我々は手動展開を生み出すかもしれない場合これは、より多くの意味を行います

をこれらの場合：。

const state = { a: 1, b: 2, c: 3 }; 
const action = { payload: { c: 4 }}; 

ので、この：

{ ...state, ...action.payload} 

に展開されます：

{ ...{ a: 1, b: 2, c: 3 }, ...{ c: 4 }} 

、左からの最初のスプレッド：

{ a: 1, b: 2, c: 3, ...{ c: 4 }} 

、その後cは上書き作りです：

{ a: 1, b: 2, c: 4 } 

希望します。