javascript-更新redux中的嵌套數據

使用Redux更新商店中嵌套數據數組的最佳/正確方法是什么?

我的商店看起來像這樣:

{
    items:{
        1: {
            id: 1,
            key: "value",
            links: [
                {
                    id: 10001
                    data: "some more stuff"
                },
                ...
            ]
        },
        ...
    }
}

我有一對異步操作來更新完整的items對象,但是我還有另一對操作要更新特定的links數組。

我的減速器當前看起來像這樣可以领救济金的游戏,但是我不確定這是否是正確的方法:

  switch (action.type) {
    case RESOURCE_TYPE_LINK_ADD_SUCCESS:
          
asked 2020-02-29T15:12:13Z
2個解決方案
58 votes

喬尼的答案是正確的(永遠都不會改變賦予您的狀態!),但我想再加一點。 如果所有對象都具有ID,則保持狀態形狀嵌套通常不是一個好主意。

這個:

{
  items: {
    1: {
      id: 1,
      links: [{
        id: 10001
      }]
    }
  }
}

是很難更新的形狀。

不必是這種方式! 您可以這樣存儲它:

{
  items: {
    1: {
      id: 1,
      links: [10001]
    }
  },
  links: {
    10001: {
      id: 10001
    }
  }
}

因為任何實體只有一個規范副本,所以更新起來容易得多。 如果需要讓用戶“編輯鏈接”,則只需在一個地方進行更新即可,它完全獨立于items或任何其他有關links的內容。

為了使您的API響應達到這種形狀,您可以使用normalizr。 將服務器操作中的實體標準化后,您可以編寫一個簡單的化簡器,將其合并為當前狀態:

import merge from 'lodash/object/merge';
function entities(state = { items: {}, links: {} }, action) {
  if (action.response && action.response.entities) {
    return merge({}, state, action.response.entities);
  }
  return state;
}

請參閱Redux real-world示例,以獲取這種方法的演示。

answered 2020-02-29T15:13:28Z
50 votes

React的update()不變性助手是一種無需更改即可創建普通舊JavaScript對象更新版本的便捷方法。

您給它提供了要更新的源對象和一個對象,該對象描述了需要更新的片段的路徑以及需要進行的更改。

例如,如果某個操作具有action.idlink屬性,而您想將link推到以id為鍵的項中的鏈接數組:

var update = require('react/lib/update')
// ...
return update(state, {
  items: {
    [action.id]: {
      links: {$push: action.link}
    }
  }
})

(示例對action.id使用ES6計算的屬性名稱)

answered 2020-02-29T15:12:41Z
translate from