Redux状態の一部を置き換える方法

Question

私はpackageTypeとpackageList関連の詳細を保持するpackageReducerを持っています。詳細がサーバーから取得されると、初期状態値をフェッチされた新しい値に置き換える必要があります。 packageListsがフェッチされている場合の例として、私は、誰かができ、以下

は私PackageStateの減速で、唯一

const initialState = { 
    packageList: packageListInitialState, 
    packageTypes: [{title: 'Select Package Type', value: ''}], 
}; 

export default function packageState(state = initialState, action) { 
    switch (action.type) { 
     case FETCH_PACKAGE_LIST_SUCCESS:{ 
      return Object.assign({}, state, action.payload); 
     } 

     case FETCH_PACKAGE_TYPES_SUCCESS:{ 
      return Object.assign({}, state, action.payload); 
     } 

     default: 
      return state; 
    } 
} 

私はイムは、全体の状態を置き換えると考え実施している方法は、「パッケージリスト」を交換する必要があります私はそれを達成する方法を教えてください？

ありがとうございます。

Answer 1

あなたはありません。彼らは同じキーを持っている場合は、対象物における

var state = {a: 1, b: 2, c: 3} 
 
var newData = {a: 4, b: 5} 
 
console.log(Object.assign({}, state, newData)) // { a: 4, b: 5, c: 3 }

プロパティは、ソースのプロパティで上書きされます。それ以降のソースのプロパティも同様に、以前のソースのプロパティを上書きします。 （docs）

したがって、実際に更新したいキーがペイロードに含まれている限り、あなたは安全です。

const initialState = { 
    packageList: packageListInitialState, 
    packageTypes: [{title: 'Select Package Type', value: ''}], 
}; 

export default function packageState(state = initialState, action) { 
    switch (action.type) { 
     case FETCH_PACKAGE_LIST_SUCCESS:{ 
      return {...state, ...action.payload}; 
     } 

     case FETCH_PACKAGE_SETTINGS_SUCCESS:{ 
      return {...state, ...action.payload}; 
     } 

     default: 
      return state; 
    } 
} 

Answer 2

これを達成しようとしているアクションがFETCH_PACKAGE_LIST_SUCCESSアクションのみであり、ペイロードが更新/フェッチされたリストであると仮定すると、以下に示すようにオブジェクトを返す必要があります。

2つのプロパティのうち1つだけを変更してオブジェクトを返そうとしているので、変更されていないプロパティには前の状態の値を使用し、もう一方のプロパティは更新できます。

const initialState = { 
    packageList: packageListInitialState, 
    packageTypes: [{title: 'Select Package Type', value: ''}], 
}; 

export default function packageState(state = initialState, action) { 
    switch (action.type) { 
     case FETCH_PACKAGE_LIST_SUCCESS:{ 
      return { packageList: action.payload, packageTypes: state.packageTypes } 
     } 

     case FETCH_PACKAGE_SETTINGS_SUCCESS:{ 
      return Object.assign({}, state, action.payload); 
     } 

     default: 
      return state; 
    } 
}