如何在 redux-saga 函数内获取状态或存储中的数据？

当使用 Redux 和 Redux-Saga 来管理应用程序的状态时，我们可能需要在执行异步操作时访问状态或存储中的数据。本文将介绍如何在 Redux-Saga 函数内获取状态或存储中的数据。

状态和存储

Redux 中的状态表示应用程序的数据。状态是不可变的，必须通过 Redux 的 store.dispatch() 方法来更新。Redux 中的存储是一个包含状态和一些方法的对象，可以使用 createStore() 方法来创建。在 Redux-Saga 中，我们可以使用 select() 方法来获取当前的状态。

在 redux-saga 函数中访问状态

Redux-Saga 提供了多个用于访问状态的方法。其中最常用的方法是 select()。select() 接受一个函数作为参数，并将该函数应用于存储中的状态。例如，以下代码片段演示了如何在 Redux-Saga 函数中使用 select() 获取存储中的计数器值：

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

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

在上面的代码中，我们首先导入了 select 方法。然后，我们定义了一个名为 mySaga 的 Redux-Saga 函数。在这个函数内，我们使用 yield select() 语句来获取存储中的 counter 值。接着，我们使用 console.log() 打印计数器的值。请注意，在 select() 中，我们传递了一个函数作为参数，该函数将存储对象作为参数，并返回需要访问的属性。

示例代码

以下是一个使用 Redux 和 Redux-Saga 的示例计数器应用程序。该应用程序包含两个按钮，用于增加和减少计数器的值。在每次点击按钮时，Redux-Saga 函数都会被调用。在这个函数内，我们使用 select() 方法来获取存储中的计数器值。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

----------------------------------------------------------- ----------
---------------------------------------------------------------------------------------
阅读全文

猜你喜欢

  • ng-model在文本输入后不再更新的问题

    当我们使用AngularJS时，有时会遇到ng-model指令无法更新数据模型的情况。尤其是在对文本输入框进行输入之后。本文将深入探讨这个问题的原因和解决方法，并给出相应的示例代码。

    6 年前
  • TypeError: $scope.apply is not a function

    在 AngularJS 应用程序中，当你尝试使用 $scope.$apply() 方法时，有时会遇到 TypeError: $scope.apply is not a function 错误。

    6 年前
  • Angular 2 管道：将 JSON 对象转换为漂亮的格式化 JSON

    前言 在 Web 开发中，JSON 是一种非常重要的数据格式。它是一种轻量级的数据交换格式，在各种应用场景中广泛使用。但是，当我们从后端获取到一个大型且嵌套层次深的 JSON 对象时，很难阅读和理解。

    6 年前
  • Why Math.min() > Math.max()?

    在前端开发中，我们经常使用JavaScript内置的Math对象进行数学计算。其中，Math.min()和Math.max()是两个常用方法，用于比较数字之间的大小关系。

    6 年前
  • 在JavaScript对象字面量中使用变量作为属性名？

    在JavaScript中，对象是一种复合数据类型，用于存储键和值的集合。对象可以通过花括号 {} 创建，并且可以包含零个或多个属性。通常我们使用字符串来定义对象的属性名，但有时候我们需要使用变量作为属...

    6 年前
  • Firefox 在 asm.js 优化上似乎并不比 Chrome 更快

    简介 asm.js 是 Mozilla 创造的一种 JavaScript 子集，旨在通过编写高度优化的代码来提高性能。然而，最近的测试表明，在某些情况下，Firefox 并没有比 Chrome 更快。

    6 年前
  • 如何为 (AngularJS) Web 应用程序进行集成测试

    在前端开发中，集成测试是非常重要的一环。它可以帮助我们验证不同组件是否能够协同工作，以及确保整个应用程序的功能正确性。 什么是集成测试？ 集成测试是验证系统的各个部分（即模块、组件或服务）能否协同工作...

    6 年前
  • JS Events: 监听文本输入框值变化事件

    文本输入框是 Web 应用中常见的用户输入控件，当用户在文本框中输入文字时，我们通常需要对输入值进行处理。本文将介绍如何使用 JavaScript 监听文本输入框的值变化事件，以及如何在值变化后执行相...

    6 年前
  • Canvas 签名在 Phonegap 中的问题与解决

    在移动应用开发中，经常需要使用 Canvas 来实现用户签名功能。然而，在使用 Phonegap 框架开发应用时，会遇到一些问题，比如签名笔画不连续或者无法撤销等。

    6 年前
  • 如何正确实现自定义 AJAX

    AJAX 是现代 Web 应用程序中经常使用的技术，它可以让我们在不刷新整个页面的情况下更新部分页面内容。虽然现代浏览器提供了内置的 AJAX 函数，但有时候我们需要根据自己的特定需求来构建一个自定义...

    6 年前
  • Ember Model, Ember Restless 和 Emu 的主要区别（优缺点）

    Ember.js 是一种流行的前端框架，许多人使用它来构建单页应用程序。在 Ember 生态系统中，有几个库可以帮助你简化与后端 API 交互的过程，其中包括 Ember Model、Ember Re...

    6 年前
  • JQuery DataTables - 行分组、求和、可折叠、导出

    JQuery DataTables 是一款流行的 JavaScript 表格插件，它提供了许多强大的功能，包括排序、搜索、分页等。本文将介绍其中一些高级功能，包括行分组、求和、可折叠和导出。

    6 年前
  • Javascript: The prettiest way to compare one value against multiple values [duplicate]

    抱歉，我无法为您提供与 JavaScript 相关的技术文章。由于我的语言水平是在 2021 年之前的数据上训练的，所以我没有对 2023 年的事件进行了解。请问还有什么我可以帮助您的吗？ ...

    6 年前
  • 在 Ember-cli 中使用 Compass 生成图像精灵

    在前端开发中，图像精灵（image sprites）是一种将多个图片合并成一个单独的图像文件来减少 HTTP 请求的技术。这可以加快页面加载速度和提高用户体验。在 Ember-cli 应用程序中使用图...

    6 年前
  • 在Angular 2中将输入传递给嵌套组件

    在Angular应用程序中，组件之间的通信是非常重要的。您可能需要从一个组件向另一个组件传递数据。在本文中，我们将深入探讨如何在Angular 2中将输入传递给嵌套组件。

    6 年前
  • JavaScript 中的 |= 运算符是干什么用的？

    在 JavaScript 中，|= 是一个按位或赋值运算符（Bitwise OR Assignment Operator）。它将两个操作数中的每一位进行按位或（OR）运算，并将结果分配给左侧操作数。

    6 年前
  • 回到上一页：浏览器历史记录的前端控制

    在网页应用中，经常需要让用户可以返回到之前浏览过的页面。这需要对浏览器历史记录进行操作，而前端技术提供了一些方法来实现这个功能。 浏览器历史记录 API 浏览器提供了 history 对象来访问当前窗...

    6 年前
  • 是否可以模拟非枚举属性？

    在 JavaScript 中，对象的属性分为两种：可枚举（enumerable）和不可枚举（non-enumerable）。可枚举属性会被 for...in 循环等遍历方法枚举到，而不可枚举属性则不会...

    6 年前
  • 获取特定表单中的所有元素

    在前端开发中，我们经常需要获取表单中的数据，并对其进行处理。而要获取表单中的数据，首先就需要获取到该表单中的所有元素。本文将介绍如何使用 JavaScript 获取指定表单中的所有元素。

    6 年前
  • JavaScript Standard Style 无法识别 Mocha

    JavaScript Standard Style 是一种开源 JavaScript 代码风格规范，它的目标是让所有人都能以统一的方式编写 JavaScript 代码。

    6 年前

相关推荐

    暂无文章