React redux - 状態でネストされた配列を更新する

Question

私はreactxでいくつかのアプリを試しています。状態のネストされた配列の更新（プッシュ、削除、更新）に問題があります。

私はこのようなサービスと呼ばれるいくつかのオブジェクトがあります。すべてのプロパティが最後と同じ値を持って問題を発生プロパティコレクションと減速して（コレクションにプロパティを追加した場合の）私はどのような

{ 
    name: 'xzy', 
    properties: [ 
     { id: 1, sName: 'xxx'}, 
     { id: 2, sName: 'zzz'}, 
    ] 
} 

を私は最近追加されました - >追加されたプロパティオブジェクトはサービスプロパティコレクションにありますが、アクションはこのコレクションのすべてのプロパティのすべての値を置き換えます。 私の減速：私は不変ヘルパーライブラリといくつかの解決策を試してみました、それは同じ問題が発生

export function service(state = {}, action) { 
     switch (action.type) { 
      case 'ADD_NEW_PROPERTY': 
       console.log(action.property) // correct new property 
       const service = { 
        ...state, properties: [ 
         ...state.properties, action.property 
        ] 
       } 
       console.log(service); // new property is pushed in collection but all properties get same values 
       return service 

      default: 
       return state; 
     } 
    } 

：私はこれを取得する上で、私は一例に新しいプロパティ{ id: 1, sName: 'NEW'}を追加した場合たとえば、

export function service(state = {}, action) { 
    case 'ADD_NEW_PROPERTY': 

       return update(state, {properties: {$push: [action.property]}}) 

      default: 
       return state; 
     } 

を状態：

{ 
    name: 'xzy', 
    properties: [ 
     { id: 1, sName: 'NEW'}, 
     { id: 1, sName: 'NEW'}, 
     { id: 1, sName: 'NEW'} 
    ] 
} 

誰かが助けることができますか？ :)

Answer 1

action.propertyのコピーも作成してください。このアクションをどのようにディスパッチしていても、同じオブジェクトを再利用することができます。

export function service(state = {}, action) { 
 
    switch (action.type) { 
 
    case 'ADD_NEW_PROPERTY': 
 
     console.log(action.property) // correct new property 
 
     const service = { 
 
     ...state, 
 
     properties: [ 
 
      ...state.properties, 
 
      { ...action.property } 
 
     ] 
 
     } 
 
     console.log(service); // new property is pushed in collection but all properties get same values 
 
     return service 
 

 
    default: 
 
     return state; 
 
    } 
 
}

Answer 2

あなたのサービスの減速は、おそらく多少のようになります。

// Copy the state, because we're not allowed to overwrite the original argument 
const service = { ...state }; 
service.properties.append(action.property) 
return service 

Answer 3

あなたはいつもそれを返す前に状態をコピーする必要があります。

export default function(state = {}, action) { 
    switch(action.type) { 
    case 'GET_DATA_RECEIVE_COMPLETE': { 
     const data = action.firebaseData; 
     const newState = Object.assign({}, state, { 
     data 
     }); 

     return newState 
    } 
    default: 
     return state; 

    } 
} 

Answer 4

私はあなたが不変のデータ初見でhttps://facebook.github.io/immutable-js/docs/#/List

import { fromJS, List } from 'immutable'; 

const initialState = fromJS({ 
    propeties: List([{ id: 1, sName: 'xyz' }] 
} 

function reducer(state = initialState, action) { 
    case ADD_NEW_PROPERTY: 
    return state 
     .update('properties', list => list.push(action.property)); 
// ... 
}