在对象中设置值时 Redux 数据不重新呈现（Immutable.js）

Posted 2023-02-19

【中文标题】在对象中设置值时 Redux 数据不重新呈现（Immutable.js）

【英文标题】：Redux data not rerendering when setting value within object (Immutable.js)

【发布时间】：2021-12-27 02:51:05

【问题描述】：

我有一个存储在 Redux 中的 immutable.js Map，其结构如下：

reduxObject: 
    details: 
    ...
    objectToChange: 
       myPosts: [
        name: 'someName',
        link: 'someLink',
       ],
       drafts: []
    

我正在尝试将数组 objectToChange.myPosts 附加到减速器函数中

let temp = state.getIn([objectToChange, myPosts])
temp.push(action.payloadData)
return state.setIn([objectToChange, myPosts], temp)

redux 数据正在更新，但显示的 redux 数据没有重新渲染。我期待 state.setIn 创建一个新的不可变对象，导致 react native 触发重新渲染。任何建议或帮助将不胜感激。提前谢谢

【问题讨论】：

我看不出 immutable.js 是如何用于这个的。如果您没有使用fromJS 或其他方法将深层对象转换为完全不可变对象，则myPost 是一个普通对象并且可变。这显然行不通。 getIn 需要一个键列表，而不是对象引用：getIn(['objectToChange', 'myPosts')。

【参考方案1】：

好的，所以 cloneDeep 是一个糟糕的解决方法，但我找到了解决问题的正确方法。我需要像这样返回语句：

case 'postNewItemFbData':
  let tempUpdate = state[action.payloadType][action.payloadLoc]
  tempUpdate.push(action.payloadData)
  return 
    ...state,
    [`$action.payloadType.$action.payloadLoc`]: tempUpdate
  

【参考方案2】：

所以我找到了一种使用不可变的解决方法，我不确定它是否可以接受，但它可以工作。我现在正在使用 lodash 的 cloneDeep 函数。

  let temp = _.cloneDeep(state)
  temp[action.payloadType][action.payloadLoc].push(action.payloadData)
  return (temp)

【讨论】：

我强烈建议您使用官方 Redux 工具包研究现代 Redux，它会为您接管不可变的更新和克隆。那里的减速器只有state[action.payloadType][action.payloadLoc].push(action.payloadData)，它最终将是不可变的。请阅读redux.js.org/tutorials/essentials/part-1-overview-concepts 的官方 Redux 教程。这是官方推荐的方法，适用于您两年多以来编写的任何 Redux 代码。

如果 lodash 可以用于 immutable.js 对象，则它没有正确实例化。如果有人运行fromJS(reduxObject)，那可能会使 lodash 爆炸……但 immutable.js 会按预期工作