Redux 数据流原理详解

在现代 Web 应用中，前端状态管理变得越来越复杂，以至于一个良好的状态管理方案成为了现代前端框架的基础。Redux 作为一种可预测的状态容器，已经成为了 React 生态系统的一个重要组件，尤其是在构建大型应用的过程中。

本文将详细介绍 Redux 数据流原理，让读者更深入地理解 Redux 的使用方式，以及如何在你的应用中使用 Redux。

Redux 数据流的基本概念

在开始深入 Redux 数据流的内部机制之前，让我们简要了解一下一些基本概念。

Action

Action 是一个普通的 JavaScript 对象，用来描述“发生了什么”这一事件。它至少包括一个 type 属性，表示这个 action 的类型。例如：

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

Reducer

Reducer 是处理状态更新的函数，它接受当前的状态和一个 action 作为参数，并返回一个新的状态。它通常是一个纯函数，不会修改输入参数，也不会产生副作用。

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

Store

Store 是负责管理整个应用状态的对象，它包含了当前的状态树和一些操作状态的方法。在 Redux 中，Store 并不直接修改状态树，而是通过 Dispatcher 中间件将 action 分发给 Reducer 进行处理。

Dispatcher

Dispatcher 是 Redux 中的中间件，它负责将 action 分发给对应的 Reducer 进行处理。你可以使用 Redux 自带的 applyMiddleware 函数来创建一个 Store，这个函数接受一个或多个中间件作为参数。

通过这些基本概念，我们可以定义 Redux 数据流的工作流程：

  1. React 组件发出一个 action。
  2. Dispatcher 中间件将这个 action 分发给 Reducer 进行处理。
  3. Reducer 根据 action 的类型和 payload 处理状态并返回一份新的状态。
  4. Store 更新自己的状态树，并通知 React 组件进行重新渲染。

这个过程中不涉及任何网络请求或异步操作，因此 Redux 这种可预测的状态容器非常适合应用程序状态管理。

Redux 数据流的内部实现

在上面的过程中，我们已经了解了 Redux 数据流的基本工作流程。在实际应用中，Redux 还包含很多复杂的实现细节，下面我们将详细介绍其中的关键点。

Redux 核心 API

在开始介绍 Redux 的内部实现之前，我们首先要了解一下 Redux 提供的一些核心 API：

createStore(reducer, [preloadedState], [enhancer])

createStore 是 Redux 的核心 API，它用来创建一个 Store 对象，参数分别为 reducer、preloadedState 和 enhancer，其中 reducer 和 preloadedState 已经在上文中介绍过了，enhancer 是一个增强器函数，用于增强 Store 的功能。

combineReducers(reducers)

combineReducers 是用来合并多个 Reducer 的函数，它可以将多个 Reducer 合并为一个 Reducer，使得 Store 只需要调用一个 Reducer 即可更新整个应用状态。

applyMiddleware(...middlewares)

applyMiddleware 是 Redux 中间件的核心函数，它可以接受一个或多个中间件作为参数，并返回一个增强版的 Store，使得 Store 能够支持中间件功能。

Redux 数据流的内部实现

Redux 的内部实现是基于这些核心 API 的封装和组合实现的。在 createStore 中，Redux 使用了一个闭包来保存了 Store 的状态树和 Reducer 函数，同时还把 dispatch 和 subscribe 方法暴露给外部使用。

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

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

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

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

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

当我们调用 createStore 函数时，Redux 会创建一个带着 currentState、currentReducer 和 subscribers 属性的空对象，然后将 dispatch、subscribe 和 getState 方法挂载于这个对象上。当 enhancer 参数存在时，会先将 increase 强化一遍，再将强化后的函数赋值给 store。

接下来，让我们来看一下 combineReducers 函数的实现。

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

combineReducers 函数接受一个对象，该对象包含了多个 Reducer。在使用 combineReducers 函数时，Redux 会根据对象的 key 选择对应的 Reducer，并将 state 对象中对应的 key 作为参数传递给这个 Reducer，这样就可以将每个 key 的状态也传递给对应的 Reducer 进行处理。

最后，让我们看一下 applyMiddleware 函数的实现：

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

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

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

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

applyMiddleware 函数的核心思想是将 Store 中的 dispatch 方法传给中间件，并在中间件中重写 dispatch 方法，以支持洋葱模型的中间件链操作。

在 applyMiddleware 函数中，我们将 createStore 函数作为参数，然后通过闭包的方式保存传入 createStore 函数返回的 Store 对象。接着，我们重写 dispatch 方法，将其传递给中间件进行加工，最后返回一个增强版的 Store，这个 Store 支持中间件中间链操作。

Redux 实践指南

在实际开发中，我们需要遵循以下原则来更好地使用 Redux：

  1. Store 应该只存储非常重要的业务数据，不要把所有的状态都放进 Store 中。
  2. 明确 reducer 的职责，并严格遵守设计模式。
  3. 避免在 reducer 中进行异步操作，这可能会导致状态更新不及时。
  4. 在 action 中添加 payload 属性，以存储非常重要的业务数据。
  5. 考虑使用 redux-thunk 来处理 action 的异步操作。

在下面这个示例中，我们将演示如何在 React 应用中使用 Redux：

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

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

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

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

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

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

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

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

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

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

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

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

在这个示例中，我们首先定义了 ADD_TODO 这个 action 类型和对应的 Reducer，然后定义了 addTodoAction 函数用来创建 ADD_TODO 类型的 action。

接着，我们创建了一个 store 对象，并使用 react-redux 包中提供的 connect 函数将 React 组件和 Redux Store 关联起来，其中 mapStateToProps 函数将 Store 中的 todos 状态映射到 props 中，mapDispatchToProps 函数将 addTodoAction 作为 props 中的函数。

最后，我们使用 Provider 组件将 App 组件包裹起来，这样，整个应用中的组件都可以通过 connect 函数关联到 Store 对象上。

总结

Redux 是一种可预测的状态容器，它将应用程序状态集中到一个单一的对象中，并让开发者通过一个叫做 Action 的普通 JavaScript 对象来描述“发生了什么”这一事件。

在使用 Redux 时，我们需要合理地定义 Reducer 做好异常处理，并遵循设计模式，同时避免在 reducer 中进行异步操作，而可以考虑使用 redux-thunk 来处理 action 的异步操作。

在实际使用中，我们可以结合 react-redux 库来方便地使用 Redux，同时，我们需要遵循上文中提到的一些原则，这样才能更好地在应用中使用 Redux。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/645067df980a9b385b974c2b

阅读全文

猜你喜欢

  • npm 包 get-object-path 使用教程

    我们在前端开发中经常需要处理 JavaScript 对象，有时候需要操作嵌套对象的属性，这时候就需要使用一个方便快捷的方法来访问对象的属性，这个时候 get-object-path 就派上用场了。

    2 年前
  • npm包stylco使用教程

    在Web开发领域，CSS样式是网站重要的视觉设计元素。但是，CSS的样式管理常常会变得混乱和难以维护。 stylco是一个npm软件包，可以解决CSS样式管理问题。

    2 年前
  • npm 包 aliyun-cs-client 使用教程

    前言 在今天的云计算和容器化浪潮的背景下，阿里云容器服务（Alibaba Cloud Container Service，简称 ACS）成为了越来越多企业解决容器化方案的首选。

    2 年前
  • npm 包 darmody-fine-uploader 使用教程

    在前端开发中，文件上传是一个常见的需求。而 npm 包 darmody-fine-uploader 就是一个非常好用的文件上传包，支持多种上传方式和自定义样式等功能。

    2 年前
  • npm 包 nativescript-utilities 使用教程

    简介 nativescript-utilities 是一个为 NativeScript 应用程序开发而设计的 npm 包，旨在帮助开发者提高效率和增强功能。它常用于简化常见工作，如 HTTP 请求、文...

    2 年前
  • npm 包 serverless-plugin-scripts 使用教程

    简介 serverless-plugin-scripts 是一个 npm 包，可以帮助开发者在 serverless 构架中方便地运行脚本，包括在 pipeline 中运行 bash 脚本、在 bui...

    2 年前
  • npm 包 simple-dispatch 使用教程

    npm 包 simple-dispatch 使用教程 前言 在前端开发过程中，我们经常会遇到需要进行事件的订阅和发布的情况，例如发送一个全局通知，或者监控一个按钮的点击事件是否触发，这时候我们可以使用...

    2 年前
  • npm 包 zup 使用教程

    简介 zup 是一个基于 puppeteer 的可视化 web 页面自动化测试工具。它可以方便地模拟用户操作，进行页面元素的自动点击、填写等操作，实现 UI 测试、性能测试、爬虫等多种应用。

    2 年前
  • npm 包 clarkchen633 使用教程

    前言 在前端开发过程中，我们常常需要使用一些外部的库和工具来提高开发效率和代码质量。npm（Node Package Manager）是世界上最大的软件库之一，其中不乏许多优秀的前端工具包和插件。

    2 年前
  • npm 包 my-package-zpy 使用教程

    简介 my-package-zpy 是一个开源的 npm 包，旨在提供一些有用的前端工具函数和组件。这个包是由前端开发者 zpy 所编写和维护，并在他的开源项目中使用。

    2 年前
  • npm包didi_texi使用教程

    在前端开发中，npm是不可或缺的依赖管理工具，能够方便地引入各种第三方包。在这里，我们介绍一款非常实用的npm包——didi_texi，它可以方便地处理各种文本格式。

    2 年前
  • npm 包 gh-compare-commits 使用教程

    随着开源社区的不断发展，GitHub 成为一个被广泛使用的版本管理平台。在进行代码开发的过程中，常常需要进行代码比较，以便了解代码变更的情况。这个时候，一个比较好用的工具就是 gh-compare-c...

    2 年前
  • npm 包 ng2-uimodule-thetasp 使用教程

    在前端开发中，使用 npm 包是十分常见的。npm 包为我们提供了许多实用功能和工具，大大提升了前端开发的效率。在本文中，我们将介绍一个非常有用的 npm 包 ng2-uimodule-thetasp...

    2 年前
  • npm 包 cordova-plugin-ddplugin 使用教程

    什么是 cordova-plugin-ddplugin cordova-plugin-ddplugin 是一个针对 Cordova 应用开发的插件，可以快速简便地实现钉钉 API 功能的调用。

    2 年前
  • npm 包 webpack-cdnizer 使用教程

    随着前端项目越来越复杂，依赖的第三方库也越来越多，经常会有这样的场景：相同的库在不同的页面都被引用，导致重复加载，浪费带宽和加载时间。该怎么办呢？CDN 选择是个不错的方案，webpack-cdniz...

    2 年前
  • npm 包 cordova.plugin.location 使用教程

    前言 在开发移动应用过程中，获取用户位置信息是非常常见的需求之一。而 cordova.plugin.location 这个 npm 包便是一个很好的解决方案。本文将深入介绍如何使用 cordova.p...

    2 年前
  • npm 包 feathers-postgres 使用教程

    在现代的 Web 应用开发中，一般使用前端框架与后端框架配合使用。前端框架可以帮助我们快速开发客户端页面，而后端框架可以帮助我们完成数据存储和处理等任务。其中，SQL 数据库是常用的一种存储方式，而 ...

    2 年前
  • npm 包 lite-bencode 使用教程

    前言 随着云计算和大数据的兴起，种子文件在文件共享和文件传输中的地位越来越重要。在种子文件中，bencode 是一种常用的编码方式。因此，很多前端开发者也需要掌握 bencode 编解码的技能。

    2 年前
  • npm 包 react-native-action-sheet-veedy 使用教程

    在 React Native 开发中，弹出对话框是非常常见的需求。其中，ActionSheet 对话框是一种在 App 中用来展示一组可供选择的操作项的组件，通常用于提示用户在不同情境中可使用的操作，...

    2 年前
  • npm 包 feathers-postgresql 使用教程

    介绍 feathers-postgresql 是一个 Node.js API 服务开发框架 FeathersJS 的一个 PostgreSQL 数据库适配器。使用该适配器，开发人员可以轻松地对 Pos...

    2 年前

相关推荐

    暂无文章