在Redux中实际上如何使用状态不变性? [英] How is state immutability actually used in Redux?

问题描述

我试图了解Redux中实际上如何使用不变性(如果有的话).我发现的每个教程/文章/文档都指出，化简绝不应该更改状态对象，而应创建更改后的数据的新副本(即化简必须是纯函数).我了解这一点，但是我找不到任何地方可以解释Redux内部实现如何实际上使用该指南.

I am trying to understand how immutability is actually (if at all) used in Redux. Every tutorial/article/document I found states that reducers should never alter the state object but instead create a new copy of the changed data (i.e. the reducers must be pure functions). I understand this but I could not find any place where there is an explanation of how this guideline is actually used by Redux internal implementation.

这是一个强烈的建议吗，或者如果我使化合剂变得不纯正，Redux中的某些东西会破裂吗?

如果是晚些时候，那么到底会发生什么?

我确实找到了丹恩说过的地方，在某些(非常罕见的情况下)还原剂可能不是纯净的，但是有风险(再次，没有解释确切的风险是什么).

I did find several places where Dan says that in some (very rare) cases the reducers may be non pure but it is risky (again, with no explanation what is the risk exactly).

推荐答案

Redux与React一起使用时，通常使用react-redux中的connect连接.用connect包装组件，使其通过指定更改处理程序来订阅对redux存储的更改，该更改处理程序在分派操作并调用reducer后被调用.调用变更处理程序后，connect使用身份比较(previousState !== newState)将商店的当前状态与新状态进行比较-比进行浅表或深度比较要快-并且仅当两个状态都不相同时相同，是否使用setState更新包装的组件.直接更改状态不会导致引用发生更改，从而不会导致重新包装组件.

Redux, when used with React, is typically connected by using connect from react-redux. Wrapping a component with connect, makes it subscribe to changes to the redux store by specifying a change handler, which gets invoked after an action is dispatched and the reducers are called. Upon invocation of the change handler, connect compares the current state of the store with the new state using identity comparison (previousState !== newState) – which is faster than doing a shallow or deep comparison – and only when the two states aren't identical, does it update the wrapped component using setState. Mutating the state directly will not cause the references to change, thereby causing the wrapped component to not re-render.

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

This is how connect determines if it should call setState:

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

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

connect also provides an option to override this behaviour by specifying that the wrapped component is not pure using:

connect(mapStateToProps, mapDispatchToProps, mergeProps, {pure: false} )

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

Identity comparison is also used by pure components by implementing shouldComponentUpdate to prevent unnecessary calls to render.

TL; DR:如果商店的状态由于突变而改变，则包裹有connect的组件将不会重新呈现.

TL;DR: a component wrapped with connect will not re-render if a store's state changes due to mutation.

Redux本身不会中断，因为它是如此之小以至于它不尝试检查reducers返回的状态.

Nothing in Redux itself will break since it is so minimal that it doesn't try to inspect the state returned by reducers.

这篇关于在Redux中实际上如何使用状态不变性?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！