My Redux:手把手构建一个自己的状态管理器

AI 编程助手,豆包旗下的编程助手,提供智能补全、智能预测、智能问答等能力,节省开发时间,释放脑海中的创造力,支持 VSCode,点击体验 AI

如果你正在进行前端开发,那么你一定知道状态管理器的重要性,尤其是在构建大型单页应用(SPA)时。Redux是一个广泛使用的状态管理库,但是在某些特定情况下,可能会需要一个更加个性化的状态管理器。在本文中,我们将手把手地构建一个自己的状态管理器,名为“myRedux”。

Redux简介

首先,让我们来了解一下Redux的一些基本概念。Redux提供了一个单一的存储(store),用于存储应用中所有的状态(state)。当状态发生变化时,Redux通过一个action来描述这个变化,并触发一个reducer来处理这个action,然后更新存储中的状态。Store会通知有关的所有组件进行更新。

Redux通常需要使用一些中间件和辅助函数来简化代码和提高性能。例如,thunk中间件用于处理异步操作,而连接(connect)函数用于将Store中的状态连接到组件中。

实现myRedux

接下来,我们将实现一个模拟Redux的myRedux。我们将使用ES6语法,并假设你已经有一些JavaScript和React的基础知识。

创建 Store

首先,我们需要一个createStore函数来创建存储。myRedux的存储将具有类似Redux的结构。我们将创建一个名为“createStore”的函数,并使其在调用时返回一个对象,包含以下三个方法:

  • getState():获取当前状态
  • dispatch(action):触发一个action并调用reducer
  • subscribe(listener):在状态更改时调用监听器

这是我们的初始代码:

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

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

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

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

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

如上所述,我们的存储将具有一个状态(state)和一个监听器数组(listeners)。我们还添加了两个未完善的函数:dispatch和subscribe。

处理 Action

接下来,我们需要编写一个reducer来处理action并更新状态。我们的reducer将在dispatch函数中使用。我们将让reducer返回一个新状态(以避免出现副作用),因此需要确保我们的状态是不可变的。这里我们可以使用ES6的扩展运算符将旧状态与新状态合并。

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

这个reducer很简单,只是检查了我们可能传递给它的两种类型的action:ADD和SUBTRACT,并更新count属性。我们还添加了一个default条件,以确保我们的reducer可以处理所有其他类型的action,并返回旧状态。

现在我们可以在dispatch函数中使用reducer,以根据传入的action更新状态。另外,我们还需要在dispatch函数中通知所有监听器状态已更改。

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

在这里,我们使用了JavaScript中的变量提升,以便在之前声明并赋值给state时就能够访问它。

现在我们的存储已经可以存储状态并通过一个纯函数(reducer)来处理action。让我们创建一个初始状态对象并使用它创建一个新的存储。

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

我们现在可以使用store对象的getState和dispatch函数来获取和更新状态。

监听状态更改

让我们继续实现我们的最后一个方法:subscribe。这个方法将接收一个监听器(listener),并在状态更改时调用。同时,我们还需要提供一个方法来取消订阅。

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

在这里,我们简单地将监听器添加到数组中。当调用store.dispatch时,我们将循环遍历所有已添加的监听器并调用它们。我们还在返回函数中添加了一个过滤器,以便在取消订阅时删除已添加的监听器。

完整代码

最后,这是我们的完整代码:

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

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

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

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

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

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

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

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

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

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

我们刚刚构建了一个非常简单的状态管理器,但它为我们提供了一个很好的基础来从中构建更复杂的实现。有关更高级技术,例如thunk中间件和连接函数,请参阅Redux文档。

结论

状态管理器是构建大型单页应用的关键部分。在本文中,我们手把手地创建了一个简单的状态管理器,myRedux。虽然这只是一个基础版本,但你可以在其中添加更多功能,以方便你自己的开发过程。如果你对Redux产生了兴趣,可以查阅Redux文档以了解更多高级技术,构建更高效、更具扩展性的状态管理器。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/671e16052e7021665ef5b16e


猜你喜欢

  • Headless CMS做微信小程序开发实用指南

    随着微信小程序的快速发展,越来越多的企业和开发者开始开发微信小程序。微信小程序需要使用后端数据支持,而传统的CMS系统,已经无法满足许多Web和移动应用程序的需要。

    12 天前
  • Redux 中如何处理多个数据源的操作

    在前端开发中,我们经常需要处理多个数据源的操作。对于管理这些数据源的状态,Redux 是一个非常不错的解决方案。Redux 是一个可预测的状态管理容器,用于 JavaScript 应用程序。

    12 天前
  • Fastify 应用中错误处理的最佳实践

    简介 Fastify 是一个快速且低开销的 Web 框架,它专为构建高效的 Node.js Web 应用而设计。当构建高流量应用时,良好的错误处理是至关重要的。Fastify 提供了一些内置的错误处理...

    12 天前
  • Hapi框架中使用Google Analytics统计访问量

    导言 Hapi是一个专门为Node.js开发的Web框架,它的设计理念是简单、强大、丰富。在开发Web应用程序时,我们经常需要跟踪访问量、分析数据,这时候Google Analytics就显得十分重要...

    12 天前
  • 对 Promise 对象的深度理解及使用场景

    什么是 Promise Promise 是一种异步编程解决方案,可以解决回调地狱的问题。它是一个代表了异步操作的最终完成或失败的值,以及它终于可用的时间点。 简而言之,Promise 提供了一种能够优...

    12 天前
  • 如何使用 Flexbox 布局实现响应式导航

    随着移动设备越来越普及,设计响应式网站变得越来越重要。其中,一个非常重要的部分就是导航栏。本文将介绍如何使用 Flexbox 布局实现响应式导航,这是一种非常简单、直观的方法。

    12 天前
  • Serverless 架构下如何实现认证与授权功能

    随着云计算和微服务的普及,Serverless 架构也越来越受到前端开发者的青睐。与传统的架构相比,Serverless 架构更具有弹性和可扩展性,能够有效地降低前端开发者的维护成本和服务器压力,同时...

    12 天前
  • Koa 项目中如何处理异常和错误信息?

    前言 Koa 是一款基于 Node.js 平台的下一代 web 开发框架,它采用了异步模型和中间件的机制使得开发者能够更加舒适地编写 web 应用程序。然而,为了确保应用程序的健壮性和可靠性,我们必须...

    12 天前
  • LESS 变量常见错误及解决方式

    LESS 是一种 CSS 预处理器。它比原生的 CSS 语法强大得多,其中最强的特性之一就是变量。使用变量可以在样式文件中定义一次值,然后在整个项目中使用。但是在使用变量时,也会遇到一些常见的错误。

    12 天前
  • 使用 Deno 构建无服务器应用的最佳实践

    什么是无服务器应用? “无服务器”这个概念在近年来变得越来越流行,但是什么是无服务器应用呢?顾名思义,它并不是说没有服务器,而是说不需要自己去管理服务器。在无服务器应用中,不用关心服务器的配置、维护和...

    12 天前
  • 在 React 中如何进行条件渲染?

    在 React 中,条件渲染是指根据一些条件决定显示或隐藏某些组件或元素。React 提供了多种方式来实现条件渲染,本文将分别介绍这些方式的优缺点及使用方法。 1. 使用 if-else 语句 最简单...

    12 天前
  • Mocha 测试框架中如何处理被测试代码中的全局变量

    Mocha 是一个流行的 JavaScript 测试框架,在前端开发中被广泛使用。但是,当我们在进行测试时,我们可能会遇到被测试代码中的全局变量。这些全局变量可能会影响测试结果,因此需要在测试中处理它...

    12 天前
  • ES9 中提出的 Private Name 特性详解

    ES9 中提出的 Private Name 特性详解 在过去的一段时间内,JavaScript 开发人员一直在讨论私有属性的问题。在 ES6 之前,JavaScript 没有原生支持私有属性的功能。

    12 天前
  • Bootstrap 响应式设计实战详解

    Bootstrap 是一个流行的前端开发框架,可以帮助我们快速构建响应式界面。对于前端开发者来说,掌握Bootstrap框架至关重要,因为Bootstrap可以让你以更短的时间构建更好的网站。

    12 天前
  • 如何使用 Material Design 的工具提示?

    工具提示是Web应用程序中必不可少的组件之一,它可以帮助用户更好的了解元素的功能与意义。Google的Material Design提供了一种漂亮且方便实现的工具提示组件。

    12 天前
  • 如何在 Tailwind CSS 中定义定位属性

    Tailwind CSS 是一种流行的 CSS 样式框架,它提供了一系列快速构建 Web 界面的工具。其中,定位属性是在构建响应式设计时至关重要的组成部分。本文将详细介绍如何在 Tailwind CS...

    12 天前
  • 如何在 MongoDB 中实现数据加密与解密的安全技术

    随着Web应用程序的日益普及,数据安全性越来越受到重视。MongoDB是一个流行的NoSQL数据库管理系统,为了保护数据的安全性,我们需要在MongoDB中实现数据加密与解密。

    12 天前
  • Redux-saga 和 Redux-thunk 的区别及使用场景

    在 Redux 中,如果需要进行异步操作,可以使用 Redux-saga 或 Redux-thunk 这两个中间件。Redux-saga 和 Redux-thunk 都可以处理异步操作,但使用方式上有...

    12 天前
  • 如何使用 Enzyme 测试 React 的生命周期方法

    React 是现代 Web 前端开发中非常常用的框架。React 中的生命周期方法是 React 组件中非常重要的部分,它们能够帮助我们了解组件在不同的生命周期阶段的内容和行为。

    12 天前
  • 如何避免与 GraphQL 有关的错误?

    GraphQL 是一种由 Facebook 开发的 API 查询语言,其具有灵活性和可扩展性,已被广泛应用于前端开发领域。但由于其易用性和强大性,也存在一些与 GraphQL 相关的错误。

    12 天前

相关推荐

    暂无文章