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

时间:2018-03-30 03:42:26

标签: javascript reactjs redux react-redux react-context

React 16.3.0 was releasedContext API不再是实验性功能。 Dan Abramov(Redux的创建者)就此发表了一篇很好的评论here,但是当Context仍然是一个实验性功能时,已经有2年了。

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

5 个答案:

答案 0 :(得分:160)

由于上下文不再是一个实验性功能,您可以直接在应用程序中使用Context,这对于将数据传递给深度嵌套的组件非常有用。

正如Mark erikson写的blog

  

如果你只使用Redux来避免传递道具,那么上下文可以   取代Redux - 但是你可能在第一个时候不需要Redux   的地方。

     

上下文也没有给你Redux DevTools之类的东西   跟踪状态更新的能力,middleware以集中添加   应用程序逻辑以及Redux的其他强大功能   使

Redux功能更强大,并提供Context Api无法提供的大量功能,同时提及 @danAbramov

  

React Redux在内部使用上下文,但它没有公开这个事实   公共API。所以你应该通过React使用上下文感觉更安全   Redux比直接因为如果它改变了,更新的负担   代码将在React Redux而不是你。

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

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

正如@dan_abramov在他的博客You might not need Redux中提到的那样,redux具有有用的应用程序,如

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

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

答案 1 :(得分:61)

如果您仅使用Redux来避免将道具传递给深层嵌套的组件,那么您可以使用Context API替换Redux。它完全适用于此用例。

另一方面,如果你正在使用Redux来实现其他目标(拥有可预测的状态容器,在组件之外处理应用程序的逻辑,保持状态更新历史记录,使用{{ 3}},Redux DevToolsRedux UndoRedux PersistRedux FormRedux Saga等等,然后您绝对没有理由将Redux替换为Context API。

参考文献:

答案 2 :(得分:8)

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

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提供一个镜头,并将react-redux替换为您的自定义Context API代码。也许,它更清洁。

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

答案 3 :(得分:8)

为我使用Redux的唯一原因是:

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

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

答案 4 :(得分:1)

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

发件人:When to use Redux?