使用Immutable.js修改Redux存储对象内数组后视图未触发重渲染问题求助

你当前的写法违反了Immutable.js的不可变原则，同时存在路径参数错误的可能，最终导致setIn没有生成新的state根对象，所以无法触发组件重渲染：

• 若myPosts是Immutable.List类型：Immutable的所有修改API（包括push）都不会修改原实例，只会返回新的实例。你直接执行temp.push(action.payloadData)没有接收返回值，temp还是原有的旧List，setIn时传入相同引用，Immutable会判定值未变更，直接返回旧state。
• 若myPosts是存放在Immutable Map内的普通JS数组：你对普通数组执行push是原地修改，setIn时传入的还是同一个数组引用，Immutable的全等对比会判定值未变更，不会生成新state，还会污染旧state。
• 额外错误点：你代码里getIn/setIn的路径[objectToChange, myPosts]如果两个都是key名而非变量，必须加引号写成['objectToChange', 'myPosts']，否则会因为取不到对应变量导致路径错误。

方案1：全量使用Immutable数据结构（推荐） #

确保myPosts存储为Immutable.List类型，直接用updateIn简化写法：

return state.updateIn(['objectToChange', 'myPosts'], oldList => 
  oldList.push(action.payloadData)
)

如果要保留你原来的写法，修正后如下：

const temp = state.getIn(['objectToChange', 'myPosts'])
const newTemp = temp.push(action.payloadData) // 接收push返回的新List
return state.setIn(['objectToChange', 'myPosts'], newTemp)

方案2：兼容普通JS数组的写法 #

如果业务逻辑需要保留myPosts为普通JS数组，修改时先浅拷贝生成新数组再更新：

const temp = state.getIn(['objectToChange', 'myPosts'])
const newTemp = [...temp, action.payloadData] // 浅拷贝生成新数组
return state.setIn(['objectToChange', 'myPosts'], newTemp)

如果修改后还是无法触发重渲染，检查组件取值逻辑：

• 用useSelector时，不要返回整个state对象，直接返回你用到的myPosts字段，保证引用变更时能被检测到
• 用connect时，确保在mapStateToProps里把myPosts映射到组件props

内容的提问来源于stack exchange，提问作者Say u