immutability之状态不变性在 Redux 中实际是如何使用的

TianFang 阅读:95 2025-01-19 22:14:33 评论:0

我试图了解不变性实际上(如果有的话)是如何在 Redux 中使用的。我发现的每篇教程/文章/文档都指出,reducer 永远不应更改状态对象,而是创建已更改数据的新副本(即 reducer 必须是纯函数)。我理解这一点,但我找不到任何地方解释 Redux 内部实现如何实际使用该指南。

这只是一个强烈的推荐,还是如果我将 reducer 设置为非纯的,Redux 内部的某些东西会崩溃吗?

如果是后者那么究竟会破坏什么?

我确实找到了几个地方,Dan 说在某些(非常罕见的)情况下,reducer 可能是非纯的,但它是有风险的(同样,没有解释确切的风险是什么)。

请您参考如下方法:

Redux 与 React 一起使用时,通常使用 react-redux 中的 connect 进行连接。使用 connect 包装组件,通过指定更改处理程序使其订阅 redux 存储的更改,该更改处理程序在分派(dispatch)操作和调用 reducers 后调用。在调用更改处理程序时,connect 使用标识比较 (previousState !== newState) 将存储的当前状态与新状态进行比较——这比执行浅比较或深度比较——只有当两个状态不相同时,它才会使用 setState 更新包装的组件。直接改变状态不会导致引用改变,从而导致包装组件不重新渲染。

这就是 connect 确定它是否应该调用 setState 的方式:

if (!pure || prevStoreState !== storeState) { 
  this.hasStoreStateChanged = true 
  this.setState({ storeState }) 
} 

connect 还提供了一个选项来通过指定包装的组件不是纯使用来覆盖此行为:

连接(mapStateToProps,mapDispatchToProps,mergeProps,{pure:false})

纯组件也通过实现 shouldComponentUpdate 来使用标识比较,以防止不必要地调用 render

TL;DR:如果商店的状态因突变而发生变化,则用 connect 包装的组件将不会重新呈现。

编辑:Redux 本身的任何内容都不会中断,因为它是如此之小以至于它不会尝试检查 reducer 返回的状态。


标签:程序员
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

关注我们

一个IT知识分享的公众号