Object.assign - ここ& Reduxの反応し使用した更新特定のプロパティ

Question

：

マイStateがこれに似たものになりますについては

const tabsState = (state = initialTabState, action) => { 
    switch(action.type) { 
    case(ENABLE_TAB): 
     return (
      Object.assign({}, state, action.payload) 
     ); 
    default: 
     return state; 
    } 
}; 

：

State : { 
    First : { 
     prop1 : "a", 
     prop2 : "b" 
    }, 
    ... 
    Last : { 
     prop1 : "c", 
     prop2 : "d" 
    } 
} 

をマイReducer関数は次のようになりますaction.payload、私はprop1の新しい値を含むデータを送信したいだけです。 Object.assignの私の理解は、sourcesのパラメータは、小道具を更新するだけです、彼らは状態でオブジェクトを上書きしない、それは正しいですか？上記で

、私のaction.payloadは、次のようになります。

First : { 
     prop1 : "z" 
    }, 
    Second : { 
     prop2 : "x" 
    }, 
    ... 

それは、Stateオブジェクト内First &以降のオブジェクトを上書きしているようです。つまり、Reducerによって返された新しい州には、各オブジェクトの2番目の小道具がありません。 prop2s

Answer 1

私はあなたがImmutable.jsを使用できると思うだろう。私はreduxを扱い、州の木に突然変異を起こさないことに非常に役立つことを発見しました。具体的なケースについては、演算子Map.mergeDeep()が必要です。ここで、Mapはあなたの不変のデータ構造です。 MergeDeepは、Object.assignと思っているように行動します。

{ 
    state: { 
    meta: { 
     data: { 
     foo: 'bar', 
     }, 
    }, 
    }, 
} 

そして、あなたはそれが次のようになりたい：：

{ 
    state: { 
    meta: { 
     data: { 
     foo: 'bar', 
     hello: 'world', 
     }, 
    }, 
    }, 
} 

まず、作成あなたの場合

import { fromJS } from 'immutable'; 
const initialTabState = fromJS({ 
    { 
     First : { 
     prop1 : "a", 
     prop2 : "b" 
     }, 
    ... 
     Last : { 
     prop1 : "c", 
     prop2 : "d" 
     } 
    } 
}) 
const tabsState = (state = initialTabState, action) => { 
    switch(action.type) { 
    case(ENABLE_TAB): 
     return (
      state.mergeDeep(fromJS(action.payload)) 
     ); 
    default: 
     return state; 
    } 
}; 

Answer 2

このようなオブジェクトツリーをマージするには、ディープアサインを使用する必要があります。

https://github.com/sindresorhus/deep-assign

Answer 3

のは、あなたがこのように見える状態を持っていると言うためにそう あなたが取得したいネストされたプロパティを更新する関数：

const update = (data, obj) => { 
    return Object.assign(
    {}, 
    data, 
    obj, 
) 
} 

そして、このようなupdate機能することを呼び出す：あなたは深い更新状態に問題がある場合は

return Object.assign(
    {}, 
    state, 
    { 
    meta: { 
     data: update(state.meta.data, {hello: 'world'}), 
    }, 
    }, 
)