学习 Redux:从 “你不知道的 JavaScript” 到实际应用

阅读时长 6 分钟读完

Redux 是一个流行的 JavaScript 应用程序状态管理工具。它旨在简化前端应用程序数据的存储和操作,并且能够轻松跨组件维护数据。

虽然 Redux 可以用于任何 JavaScript 应用程序,它最常用于 React 应用程序中。本文将介绍 Redux 的基本概念和工作原理,并提供一些实践经验和示例代码。

Redux 前置知识

在学习 Redux 之前,需要对 JavaScript 有一定的了解。特别是需要对闭包、函数式编程和 ES6 等语言特性有一定的掌握。如果您还没有学习这些知识,我们建议您先学习这些主题。

在这里提到的一些重要概念包括:

  • 函数式编程
  • 纯函数
  • 组合
  • 核心 Redux 概念:state、action、reducers 和 store
  • React 组件在 Redux 中的作用

Redux 概述

Redux 是一个状态容器,它允许我们将应用程序数据存储在一个单独的地方,而不是分散在多个组件中。它允许我们通过 store 总体掌握应用程序状态。

核心概念

Redux 包含以下核心概念:

  1. State:应用程序数据,以单一对象形式呈现。
  2. Action:对 State 进行操作的对象,包含一个 action 类型和一个可选数据负载。
  3. Reducer:一个纯函数,根据 Action 的类型来更新 State。
  4. Store:将 State、Action 和 Reducer 结合在一起的对象。Store 通过 dispatch 方法来处理 Action,Reducer 根据 Action 类型更新 State。Store 可以通过 subscribe 方法添加监听器。

三大原则

Redux 的设计受到了 Flux 架构的启发,但是有一些重要区别。下面是 Redux 设计的三个基本原则:

  1. 单一状态树:应用程序的所有状态都存储在一个单一对象中。
  2. 状态只读:不能直接改变状态,需要触发一个 Action。
  3. 纯函数更新状态:Reducer 是一个纯函数,它可以根据 Action 的类型和可选负载更新 State。

Redux 实践

在 Redux 应用中,React 组件会通过 dispatch 发送一个 action,然后 Reducer 函数会修改状态树,Redux 使用 store 来组织状态,通过 store 来派发更新,更新后渲染组件。

下面是一个使用 Redux 实现 To-Do App 的示例。

Store

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

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

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

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

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

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

Action Creator

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

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

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

React 组件

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

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

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

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

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

在上面的示例中,我们首先创建了一个 Store,并将 todosReducer 函数作为参数传入。todosReducer 函数返回了一个新的 State 对象,根据 Action 的类型更新 State。Store 可以通过 getState 方法来获取状态。

我们还创建了一个 ADD_TODO 类型的 action creator,用于向 Store 发送操作指令。我们将该 action creator 导出,方便其他组件调用。

在 React 组件中,我们使用了高阶组件 useEffect 监听 Store 的 update 事件,每次修改渲染 UI。handleClick 函数接受表单数据,调用添加 Action Creator 的方法,并将 todoText 传递给 reducer 处理。

总结

Redux 是一个流行的前端状态管理工具,它有很多强大的特性,是 React 中最佳的存储库之一。本文介绍了 Redux 的核心概念和工作原理,并提供了一个使用 Redux 和 React 实现 To-Do App 的示例。学习 Redux 的过程中,学习一些高级概念和设计模式是必须的,但是纯函数的理解和实现,是入门 Redux 的首要难点。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/64c933605ad90b6d04161e84

纠错
反馈