React Context vs React Redux,我应该何时使用每一个？

Question

React 16.3.0已经发布,Context API不再是实验性功能.Dan Abramov(Redux的创建者)在这里写了一篇很好的评论,但是当Context仍然是一个实验性功能已经2年了.

我的问题是,在您的观点/经验中何时应该使用React Context而不是React Redux,反之亦然？

Answer 1

由于Context不再是一个实验性功能,您可以直接在应用程序中使用Context,并且非常适合将数据传递给深度嵌套的组件,这些组件就是为它设计的.

正如Mark erikson在他的博客中写道:

如果你只是使用Redux来避免传递道具,那么上下文可以取代Redux - 但是你可能首先不需要Redux.

Context也没有为您Redux DevTools提供跟踪状态更新,middleware添加集中式应用程序逻辑以及其他强大功能的能力Redux .

Redux功能强大得多,并提供了许多功能,而Context Api不是像@danAbramov所提到的那样

React Redux在内部使用上下文,但它不会在公共API中公开这一事实.所以你应该通过React Redux使用上下文比直接感觉更安全,因为如果它发生变化,更新代码的负担将在React Redux而不是你.

它直到Redux实际更新其实现以遵守最新的上下文API

最新的Context API可以用于您只需使用Redux在组件之间传递数据的应用程序,但是使用集中数据并在Action创建者中处理API请求的应用程序使用redux-thunk或redux-saga仍然需要redux.除此之外,还有其他相关的库redux-persist,它们允许您将商店数据保存在localStorage中,并在刷新时重新水化,这是上下文API仍然不支持的.

正如@dan_abramov在他的博客中提到的那样你可能不需要Redux,那就是redux有一个很有用的应用程序

• 将状态保持到本地存储,然后从开箱即用.
• 在服务器上预填充状态,以HTML格式将其发送到客户端,并从中启动,开箱即用.
• 序列化用户操作并将其与状态快照一起附加到自动错误报告中,以便产品开发人员
  可以重播它们以重现错误.
• 通过网络传递操作对象以实现协作环境,而不会对代码的编写方式进行重大更改.
• 维护撤消历史记录或实施乐观突变,而不会对代码的编写方式进行重大更改.
• 在开发状态历史之间旅行,并在代码改变时从动作历史中重新评估当前状态,即TDD.
• 为开发工具提供全面的检查和控制功能,以便产品开发人员可以为他们的
  应用程序构建自定义工具.
• 在重用大多数业务逻辑的同时提供备用UI.

有了这么多应用程序,很快就会说Redux将被新的Context API取代

Answer 2

如果您仅使用Redux来避免将props传递给深层嵌套组件,那么您可以使用ContextAPI 替换Redux .它完全适用于此用例.

另一方面,如果您将Redux用于其他一切(具有可预测的状态容器,在组件外部处理应用程序的逻辑,保持状态更新历史记录,使用Redux DevTools,Redux Undo,Redux Persist,Redux Form,Redux Saga,Redux Logger等...),那么你绝对没有理由用ContextAPI 代替Redux .

参考文献:

• Redux还没死!
• 你可能不需要Redux

Answer 3

使用Redux的唯一原因是:

• 您需要一个全局状态对象(出于各种原因,如可调试性,持久性......)
• 您的应用程序已经或将会很大,并且应该扩展到许多开发人员:在这种情况下,您可能需要一个间接级别(即事件系统):您触发事件(过去),然后是您不知道的人组织实际上可以听取它们

您可能不需要整个应用程序的间接级别,因此可以同时混合样式并使用本地状态/上下文和Redux.

Answer 4

我更喜欢使用redux和redux-thunk进行API调用(也使用Axios)并将响应调度到reducers.它干净,易于理解.

Context API特别针对React组件连接到商店的react-redux部分.为此,react-redux是好的.但是如果你愿意,因为Context是官方支持的,你可以使用Context API而不是react-redux.

因此,问题应该是Context API vs react-redux,而不是Context API vs redux.此外,这个问题有点自以为是.因为,我熟悉react-redux并在所有项目中使用它,我将继续使用它.(没有动力让我改变).

但是如果你今天学习redux,并且你没有在任何地方使用它,那么值得给Context API一个镜头,并用你的自定义Context API代码替换react-redux.也许,它更清洁.

就个人而言,这是一个熟悉的问题.没有明确的理由选择一个而不是另一个,因为它们是等价的.而在内部,react-redux仍然使用Context.

Answer 5

• 如果您需要将中间件用于各种目的。例如记录操作、错误报告、根据服务器的响应调度其他请求等。
• 当来自多个端点的数据影响单个组件/视图时。
• 当您想要更好地控制应用程序中的操作时。Redux 支持跟踪操作和数据更改，它极大地简化了调试。
• 如果您不希望服务器响应直接更改应用程序的状态。Redux 添加了一个层，您可以在其中决定如何、何时以及是否应用这些数据。观察者模式。您只需将组件连接到 Redux 商店，而不是在整个应用程序中创建多个发布者和订阅者。

来自：什么时候使用 Redux？