Skip to main content

为什么使用 React Redux？

¥Why Use React Redux?

Redux 本身是一个独立的库，可以与任何 UI 层或框架一起使用，包括 React、Angular、Vue、Ember 和 vanilla JS。虽然 Redux 和 React 通常一起使用，但它们是相互独立的。

¥Redux itself is a standalone library that can be used with any UI layer or framework, including React, Angular, Vue, Ember, and vanilla JS. Although Redux and React are commonly used together, they are independent of each other.

如果你将 Redux 与任何类型的 UI 框架一起使用，你通常会使用 "用户界面绑定" 库将 Redux 与你的 UI 框架结合在一起，而不是直接通过 UI 代码与存储交互。

¥If you are using Redux with any kind of UI framework, you will normally use a "UI binding" library to tie Redux together with your UI framework, rather than directly interacting with the store from your UI code.

React Redux 是 React 的官方 Redux UI 绑定库。如果你同时使用 Redux 和 React，则还应该使用 React Redux 来绑定这两个库。

¥React Redux is the official Redux UI binding library for React. If you are using Redux and React together, you should also use React Redux to bind these two libraries.

要了解为什么应该使用 React Redux，了解 "UI 绑定库" 的作用可能会有所帮助。

¥To understand why you should use React Redux, it may help to understand what a "UI binding library" does.

信息

如果你对是否应该一般使用 Redux 有疑问，请参阅以下文章，讨论你何时、为何需要使用 Redux，以及如何使用它：

¥If you have questions about whether you should use Redux in general, please see these articles for discussion of when and why you might want to use Redux, and how it's intended to be used:

将 Redux 与 UI 集成​

¥Integrating Redux with a UI

将 Redux 与任何 UI 层一起使用都需要 相同的一致步骤集：

¥Using Redux with any UI layer requires the same consistent set of steps:

  1. 创建 Redux 存储

    ¥Create a Redux store

  2. 订阅更新

    ¥Subscribe to updates

  3. 订阅回调内部：

    ¥Inside the subscription callback:

    1. 获取当前存储状态

      ¥Get the current store state

    2. 提取这块 UI 需要的数据

      ¥Extract the data needed by this piece of UI

    3. 使用数据更新 UI

      ¥Update the UI with the data

  4. 如有必要，以初始状态渲染 UI

    ¥If necessary, render the UI with initial state

  5. 通过调度 Redux 操作来响应 UI 输入

    ¥Respond to UI inputs by dispatching Redux actions

虽然可以手动编写此逻辑，但这样做会变得非常重复。此外，优化 UI 性能需要复杂的逻辑。

¥While it is possible to write this logic by hand, doing so would become very repetitive. In addition, optimizing UI performance would require complicated logic.

订阅存储、检查更新数据和触发重新渲染的过程可以变得更加通用和可重用。像 React Redux 这样的 UI 绑定库可以处理存储交互逻辑，因此你不必自己编写该代码。

¥The process of subscribing to the store, checking for updated data, and triggering a re-render can be made more generic and reusable. A UI binding library like React Redux handles the store interaction logic, so you don't have to write that code yourself.

信息

要更深入地了解 React Redux 的内部工作原理以及它如何为你处理存储交互，请参阅 惯用的还原：React Redux 的历史和实现。

¥For a deeper look at how React Redux works internally and how it handles the store interaction for you, see Idiomatic Redux: The History and Implementation of React Redux.

使用 React Redux 的原因​

¥Reasons to Use React Redux

这是 React 的官方 Redux UI 绑定​

¥It is the Official Redux UI Bindings for React

虽然 Redux 可以与任何 UI 层一起使用，但它最初是设计用于与 React 一起使用的。有 许多其他框架的 UI 绑定层，但 React Redux 是由 Redux 团队直接维护的。

¥While Redux can be used with any UI layer, it was originally designed and intended for use with React. There are UI binding layers for many other frameworks, but React Redux is maintained directly by the Redux team.

作为 React 的官方 Redux 绑定，React Redux 会及时更新任一库中的任何 API 更改，以确保你的 React 组件按预期运行。其预期用途采用 React 的设计原则 - 编写声明性组件。

¥As the official Redux binding for React, React Redux is kept up-to-date with any API changes from either library, to ensure that your React components behave as expected. Its intended usage adopts the design principles of React - writing declarative components.

它为你实现性能优化​

¥It Implements Performance Optimizations For You

React 通常很快，但默认情况下，对组件的任何更新都会导致 React 重新渲染组件树该部分内的所有组件。这确实需要工作，并且如果给定组件的数据没有更改，则重新渲染可能会浪费一些精力，因为请求的 UI 输出将是相同的。

¥React is generally fast, but by default any updates to a component will cause React to re-render all of the components inside that part of the component tree. This does require work, and if the data for a given component hasn't changed, then re-rendering is likely some wasted effort because the requested UI output would be the same.

如果性能是一个问题，那么提高性能的最佳方法是跳过不必要的重新渲染，以便组件仅在数据实际更改时重新渲染。React Redux 在内部实现了许多性能优化，以便你自己的组件仅在实际需要时重新渲染。

¥If performance is a concern, the best way to improve performance is to skip unnecessary re-renders, so that components only re-render when their data has actually changed. React Redux implements many performance optimizations internally, so that your own component only re-renders when it actually needs to.

此外，通过连接 React 组件树中的多个组件，你可以确保每个连接的组件仅从该组件所需的存储状态中提取特定的数据片段。这意味着你自己的组件需要重新渲染的频率会降低，因为大多数时候这些特定的数据片段都没有改变。

¥In addition, by connecting multiple components in your React component tree, you can ensure that each connected component only extracts the specific pieces of data from the store state that are needed by that component. This means that your own component will need to re-render less often, because most of the time those specific pieces of data haven't changed.

社区支持​

¥Community Support

作为 React 和 Redux 的官方绑定库，React Redux 拥有庞大的用户社区。这使得你可以更轻松地寻求帮助、了解最佳实践、使用基于 React Redux 构建的库以及在不同的应用中重用你的知识。

¥As the official binding library for React and Redux, React Redux has a large community of users. This makes it easier to ask for help, learn about best practices, use libraries that build on top of React Redux, and reuse your knowledge across different applications.

¥Links and References

理解 React Redux​

¥Understanding React Redux

社区资源​

¥Community Resources