React Context 与 React Redux,我应该什么时候使用它们?

React Context vs React Redux, when should I use each one?

React 16.3.0 was released and the Context API is not an experimental feature anymore. Dan Abramov (the creator of Redux) wrote a good comment 关于这个,但是 Context 仍然是一个实验性功能已有 2 年了。

我的问题是,在您的 opinion/experience 中,我什么时候应该使用 React Context 而不是 React Redux,反之亦然?

由于 Context 不再是实验性功能,您可以直接在应用程序中使用 Context,这对于将数据传递到深层嵌套的组件非常有用专为。

正如 Mark Erikson 在他的 blog 中所写:

If you're only using Redux to avoid passing down props, context could replace Redux - but then you probably didn't need Redux in the first place.

Context also doesn't give you anything like the Redux DevTools, the ability to trace your state updates, middleware to add centralized application logic, and other powerful capabilities that Redux enables.

Redux 更强大,提供了大量 Context API 没有的功能,正如 @danAbramov 提到的

React Redux uses context internally but it doesn’t expose this fact in the public API. So you should feel much safer using context via React Redux than directly because if it changes, the burden of updating the code will be on React Redux and not you.

由 Redux 实际更新其实现以符合最新的 Context API。

最新的 Context API 可用于您将简单地使用 Redux 在组件之间传递数据的应用程序,但是使用集中式数据并处理 API Action creators 请求的应用程序使用 redux-thunkredux-saga 仍然需要 Redux。除了这个 Redux 还有其他与之关联的库,例如 redux-persist,它允许您 save/store localStorage 中的数据并在刷新时重新水化,这是 Context API 仍然不支持的。

正如@dan_abramov 在他的博客 You might not need Redux 中提到的,Redux 有一些有用的应用,例如

  • Persist state to a local storage and then boot up from it, out of the box.
  • Pre-fill state on the server, send it to the client in HTML, and boot up from it, out of the box.
  • Serialize user actions and attach them, together with a state snapshot, to automated bug reports, so that the product developers
    can replay them to reproduce the errors.
  • Pass action objects over the network to implement collaborative environments without dramatic changes to how the code is written.
  • Maintain an undo history or implement optimistic mutations without dramatic changes to how the code is written.
  • Travel between the state history in development, and re-evaluate > the current state from the action history when the code changes, ala TDD.
  • Provide full inspection and control capabilities to the development tooling so that product developers can build custom tools for their apps.
  • Provide alternative UIs while reusing most of the business logic.

有了这么多的应用程序,现在说 Redux 将被新的 Context 取代还为时过早 API。

如果你使用 Redux 只是为了避免将 props 向下传递给深层嵌套的组件,那么你可以用 Context API 替换 Redux。它正是为这个用例设计的。

另一方面,如果您将 Redux 用于其他一切(具有可预测的状态容器,在组件之外处理应用程序的逻辑,集中应用程序的状态,使用Redux DevTools to track when, where, why, and how your application's state changed, or using plugins such as Redux Form, Redux Saga, Redux Undo, Redux Persist, Redux Logger, etc...),那么你绝对没有理由放弃 Redux。 Context API 没有提供任何这些。

而且我个人认为 Redux DevTools 扩展 是一个令人惊叹的、被低估的调试工具,它本身就证明了继续使用 Redux 是合理的。

部分参考资料:

我更喜欢使用带有 redux-thunk 的 redux 进行 API 调用(也使用 Axios)并将响应分派给 reducer。它简洁明了。

上下文 API 与 react-redux 关于 React 组件如何连接到商店的部分非常具体。为此,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。

我使用 Redux 的唯一原因是:

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

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

  • If you need to use middleware for various purposes. For example logging actions, error reporting, dispatching other requests depending on the server’s response, etc.
  • When data coming from multiple endpoints influence single component/view.
  • When you want to have greater control over actions in your applications. Redux enables tracking actions and data change, it greatly simplifies debugging.
  • If you don’t want server response to directly change the state of your application. Redux adds a layer, where you can decide how, when and if this data should be applied. The observer pattern. Instead of creating multiple publishers and subscribers across the whole app, you just connect components to Redux store.

发件人:When to use Redux?