React Redux reducer覆蓋值LOAD_SUCCESS？

我有一個profilesReducer，我想用它在我的redux商店中存儲一個或多個用戶配置文件。作爲一個例子，認爲Twitter需要存儲我的個人資料以及其他個人資料。React Redux reducer覆蓋值LOAD_SUCCESS？

這是我的profilesReducer.js：

import * as types from '../actions/actionTypes'; 

const initialState = [] 

export default function profilesReducer(state = initialState, action) { 
    switch (action.type) { 
    case types.LOAD_PROFILE_SUCCESS: 
     return [Object.assign({}, action.profile)] 
    case types.UPDATE_PROFILE_SUCCESS: 
     return [ 
     ...state.filter(profile => profile.id !== action.profile.id), 
     Object.assign({}, action.profile) 
     ] 
    default: 
     return state; 
    } 
}

問題是負載爲接收多個配置文件（由profile.id區分），但overwritting在商店中的現有簡檔，而不是追加/更新。

我需要LOAD_PROFILE以允許商店中的多個用戶個人資料。有什麼建議麼？由於

來源

2017-08-15 AnApprentice

很肯定你的代碼需要改變這一點。

import * as types from '../actions/actionTypes'; 

const initialState = [] 

export default function profilesReducer(state = initialState, action) { 
    switch (action.type) { 
    case types.LOAD_PROFILE_SUCCESS: 
     return [...Object.assign({}, action.profile)] 
    case types.UPDATE_PROFILE_SUCCESS: 
     return [ 
     ...state.filter(profile => profile.id !== action.profile.id), 
     Object.assign({}, action.profile) 
     ] 
    default: 
     return state; 
    } 
}

你有它的方式，你只需返回一個包含在此action.profile一個項目一個數組，但你需要在添加項目已經有其他項目的數組。你也不能簡單地推動，因爲這會改變數組。這條線是你需要改變的。

return [Object.assign({}, action.profile)] 不追加

return [...Object.assign({}, action.profile)] 不追加，不發生變異。

來源

2017-08-15 16:06:36

編輯

我已經改變了我的解決方案，它包含了一種更新的數組。

這裏是一個CodeSandbox測試：https://codesandbox.io/s/zk9r6k1z4p

import * as types from '../actions/actionTypes'; 

const initialState = [] 

export default function profilesReducer(state = initialState, action) { 
    switch (action.type) { 
    case types.LOAD_PROFILE_SUCCESS: 
     return [...state, action.profile] 
    case types.UPDATE_PROFILE_SUCCESS: 
     return state.map((profile) => { 
     if(profile.id !== action.profile.id) { 
      return profile; 
     } 

     return { 
      ...profile, 
      ...action.profile 
     };  
    }); 
    default: 
     return state; 
    } 
}

來源

2017-08-15 16:04:37 Purgatory

爲什麼使用傳播的Object.assign在一起的時候只有一個能爲你做的工作 –

@ShubhamKhatri，我傻我已經更新了它。 – Purgatory

傳播現有的狀態，只是在末尾添加新的配置文件：

case types.LOAD_PROFILE_SUCCESS: 
    return [...state, action.profile]

Object.assing({}, action.profile)是不必要的，因爲所有的，它並在這裏複製action.profile到一個新的空對象{}並將其返回。

來源

2017-08-15 16:21:35

你可以達到你想要使用Object.assign或spread operator語法無論是什麼，你不必同時使用

隨着Object.assign，

case types.LOAD_PROFILE_SUCCESS: 
    return Object.assign([], state, action.profile)

隨着Spread operator syntax

case types.LOAD_PROFILE_SUCCESS: 
    return [...state, action.profile]

個然而陣營文檔建議您使用傳播語法在Object.assign，看到這個帖子：

Using Object.assign in React/Redux is a Good Practice?

來源

2017-08-15 16:32:35

React Redux reducer覆蓋值LOAD_SUCCESS？

回答

相關問題