Redux 中文文档翻译

阅读时长 4 min read

Redux 是一个流行的 JavaScript 应用程序状态管理库。它的主要思想是将所有状态存储在一个中央存储库中,并使用纯函数来更改它。Redux 通过这种方式确保状态具有可预测性和可控性。

Redux 与 React 紧密结合,但其实也可以轻松集成到其他框架中。Redux 拥有广泛的社区,提供了许多有用的拓展和工具。如果您想使用 Redux,不管是在 React 中还是在其他应用程序中,本文将为您提供基础的指导和深度学习。

安装

要在您的应用程序中使用 Redux,您需要首先安装 Redux 包。您可以使用 npm 或 yarn 安装它。

安装完成后,您就可以在应用程序中使用 Redux。

基本概念

Redux 提供了可预测的状态管理。这是因为它通过一个中央存储库来控制状态,并且使用纯函数来更改它。以下是 Redux 的主要概念:

Store

存储状态的地方。它是应用程序中唯一的状态源。只能使用纯函数来更改状态。

Action

一条指令,用于更改存储状态。它描述了将要发生的操作。它是一个带有 type 字段的对象。

Reducer

一个纯函数,用于更改存储状态。在 Redux 中,只能使用这些函数来更改状态。

Dispatch

用于向存储库发送 Action 的函数。它可以是一个简单的函数调用,也可以是使用中间件等高级技术的复杂操作。

Subscriber

监听存储库更改的函数。

示例

以下示例将介绍 Redux 的基本流程。我们将使用 React 库来构建应用程序,并将 Redux 用于状态管理。我们首先创建一个存储库。

-- -------------------- ---- -------
------ - ----------- - ---- --------

----- ------------ - -
  ------ -
--

-------- ------------- - ------------- ------- -
  ------ ------------- -
    ---- ------------
      ------ - ------ ----------- - - --
    ---- ------------
      ------ - ------ ----------- - - --
    --------
      ------ ------
  -
-

----- ----- - ---------------------

在我们的应用程序中,我们有一个计数器。我们将创建两个按钮,一个用于增加计数器的值,另一个用于减少计数器的值。

-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------ ----------- - ---- --------------

-------- --------- -
  ----- -------- - --------------
  ----- ----- - ----------------- -- -------------

  ----- --------- - -- -- ---------- ----- ----------- ---
  ----- --------- - -- -- ---------- ----- ----------- ---

  ------ -
    -----
      ---------- ------------
      ------- ------------------------------
      ------- ------------------------------
    ------
  --
-

我们使用 useDispatch 钩子来访问 Redux 中的 dispatch 函数,并使用 useSelector 钩子来访问存储库中的状态。在这个例子中,我们使用它们来增加和减少计数器。当我们点击按钮时,会调用相应的 Action,并通过存储库来更新状态。

这个例子只是冰山一角。Redux 还有很多其他强大的功能,例如中间件和异步操作。希望本文能为您提供足够的指导和深度学习,以便您充分利用 Redux 库的功能。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/6780776ece7f4861253cad96

Feed
back