redux-saga 初级学习教程

最新推荐文章于 2023-05-21 20:23:31 发布
最新推荐文章于 2023-05-21 20:23:31 发布
阅读量897 收藏
点赞数
分类专栏： 【Redux Mobx Saga 点滴知识 】

redux-saga 初级学习教程

先从 redux 的三原则谈起:

  • 唯一的状态源：Store
  • 唯一触发状态修改的方法： Action
  • 唯一转换状态的纯函数： Reducer

redux.png

三者中可以添加异步操作的地方只有 store.dispatch(action) 这个环节了，这也是中间件编写的位置。那么是否可以借鉴 redux 的唯一原则将异步操作逻辑统一处理？redux-saga 的设计理念正是如此。

1. 见证 saga

1.1. 聚合异步操作

不同于 redux-thunk 和类似功能的 redux-promise 等中间件，redux-saga 可以被看作是后台运行的进程，监听发起的 action ，决定该 action 是进行异步调用，还是触发其他的 action 发送到 Store 。这样的机制使得在设计应用时可以将异步操作逻辑进行统一管理。

saga.png

1.2. 官方初级教程

克隆官方初级教程

$ git clone https://github.com/redux-saga/redux-saga-beginner-tutorial
$ cd redux-saga-beginner-tutorial
$ npm install

然后运行：

$ npm run start

打开 http://localhost:9966/ ，如果一切正常浏览器中将显示：

tutorial_example

点击 Increment 按钮可增加数字， Decrement 按钮减少数字。

1.2.1. Hello Sagas

在根目录下创建 sagas.js 文件，同时输入代码如下：

export function* helloSaga() {
  console.log('Hello Sagas!')
}

这里使用了 Generator ，一种异步流程控制机制，它可以用同步代码写出异步逻辑。接下来需要做两件事件：

  • 将 redux-saga 中间件接入 Redux Store 。
  • 使用中间件运行 Sagas 程序，也就是刚刚编写的函数。

在 main.js 文件中添加：

// ...
import { createStore, applyMiddleware } from 'redux'
import createSagaMiddleware from 'redux-saga'

// ...
import { helloSaga } from './sagas'  // 导入 Sagas

const sagaMiddleware = createSagaMiddleware()
const store = createStore(
  reducer,
  applyMiddleware(sagaMiddleware)  // 添加到中间件
)
sagaMiddleware.run(helloSaga)  // 运行 Sagas 函数

const action = type => store.dispatch({type})

// 其余代码不变

刷新后在 Console 界面中可以看到 Hello Sagas！ 。

1.2.1.1. 试试异步调用

现在添加一个按钮 Increment after 1 second ，每次点击该按钮，数字会延迟 1 秒钟后增加。

首先在 Counter.js 文件中添加 UI 组件：

const Counter = ({ value, onIncrement, onDecrement, onIncrementAsync }) =>
  <div>
  ...
    {' '}
    <button onClick={onIncrementAsync}>
      Increment after 1 second
    </button>
    <hr />
    <div>
      Clicked: {value} times
    </div>
  </div>

将方法添加到父组件 main.js：

function render() {
  ReactDOM.render(
    <Counter
      value={store.getState()}
      onIncrement={() => action('INCREMENT')}
      onDecrement={() => action('DECREMENT')}
      onIncrementAsync={() => action('INCREMENT_ASYNC')} />,
    document.getElementById('root')
  )
}

注意： 此时 action 依然是 action 纯对象，而不是函数。（与 redux-thunk 不同）

然后添加一个 Saga 实现异步调用，每次发送 INCREMENT_ASYNC action 都会延迟 1 秒钟增加数字，在 Sagas.js 文件中写入：

import { delay } from 'redux-saga'
import { put, takeEvery, all } from 'redux-saga/effects'

// Saga 作用函数：执行异步任务
export function* incrementAsync() {
  yield delay(1000)
  yield put({ type: 'INCREMENT' })
}

// Saga 监听函数：每次监听到 ```INCREMENT_ASYNC``` action ，都会触发一个新的异步任务
export function* watchIncrementAsync() {
  yield takeEvery('INCREMENT_ASYNC', incrementAsync)
}

现在需要执行两个处理不同任务的 Sagas，一个是之前的 helloSaga()，另外一个就是刚刚创建的 watchIncrementAsync()，将它们统一输出给运行函数：

// 同时执行一个入口的多个 Sagas
export default function* rootSaga() {
  yield all([
    helloSaga(),
    watchIncrementAsync()
  ])
}

相应的在 main.js 文件中修改：

// ...
import rootSaga from './sagas'

const sagaMiddleware = createSagaMiddleware()
const store = ...
sagaMiddleware.run(rootSaga)

// ...

完工！看看效果。

当然还是需要一些解释的。

1.2.2. 一些解释

通过实例分析可知，redux-saga 模块的工作方式与 Koa 类似。 Sagas 就是一些 Generator 函数，而 redux-saga 的中间件起到的作用与 co 一样。同时 redux-saga 暴露了多种效应接口 (Effect)，其中 put 的作用就是指示中间件触发一个 action 。

2. 基本概念

2.1. Saga 辅助函数

在 redux-saga 中的辅助函数提供了打包内部函数并在特定 action 触发时激活任务等功能。它们建立在底层 API 之上，常用的 takeEvery 所提供的功能就和 redux-thunk 非常相似 。

2.1.3. 实现 AJAX 的常见操作

通过点击一个 “取数据” 按钮，触发了 FETCH_REQUESTED action。如何设计一个从服务器端获取数据的任务来处理这个 action？

首先创建一个执行异步 action 的任务：

import { call, put } from 'redux-saga/effects'

export function* fetchData(action) {
   try {
      const data = yield call(Api.fetchUser, action.payload.url)
      yield put({type: "FETCH_SUCCEEDED", data})
   } catch (error) {
      yield put({type: "FETCH_FAILED", error})
   }
}

然后在触发 FETCH_REQUESTED action 时，调用上述任务：

import { takeEvery } from 'redux-saga/effects'

function* watchFetchData() {
  yield takeEvery('FETCH_REQUESTED', fetchData)
}

辅助函数 takeEvery 允许获取数据的多个实例并发。也就是说，创建一个新的获取数据任务无需等待之前的任务结束。如果只想获取最新请求的响应，可以使用 takeLatest 辅助函数, 在某时刻，它只允许一个获取数据任务执行。在这种情况下调用一个新的获取数据任务时，如果之前的任务没有完成那么之前的任务将会自动取消。

import { takeLatest } from 'redux-saga'

function* watchFetchData() {
  yield* takeLatest('FETCH_REQUESTED', fetchData)
}

对于多个 actions 有多个 Sagas 进行处理，相应的有多个辅助函数：

import { takeEvery } from 'redux-saga'

// FETCH_USERS
function* fetchUsers(action) { ... }

// CREATE_USER
function* createUser(action) { ... }

// use them in parallel
export default function* rootSaga() {
  yield takeEvery('FETCH_USERS', fetchUsers)
  yield takeEvery('CREATE_USER', createUser)
}

2.2. 声明形式的效应接口 (Effects)

Sagas 本身就是 Generator 函数，函数中返回若干效应对象，中间件对这些效应对象进行操作。可以大体的认为中间件把这些效应对象看成指令进行操作。在 redux-sagaj/effects 模块中提供了多个生成效应对象的接口。

Sagas 中可以生成各种形式的效应对象，其中 Promise 形式较为简单。

先来看一个监听 PRODUCTS_REQUESTED action 的 Saga：

import { takeEvery } from 'redux-saga/effects'
import Api from './path/to/api'

function* watchFetchProducts() {
  yield takeEvery('PRODUCTS_REQUESTED', fetchProducts)
}

function* fetchProducts() {
  const products = yield Api.fetch('/products')
  console.log(products)
}

上例中在 fetchProducts Saga 中执行了 Api.fetch('/products') 函数，该函数会立即执行返回一个 Promise。清晰明了，但是对于测试环节这却带来了不便。Promise 是值还是方法？因此在 Saga 中不生成立即执行的异步函数，使用函数调用的描述来替代。

import { call } from 'redux-saga/effects'

function* fetchProducts() {
  const products = yield call(Api.fetch, '/products')
  // ...
}

效用接口 call 将异步函数转换成 Javascript 纯对象（效用对象），将该效用对象作为指令交给中间件执行，完毕后将结果返回给 Saga 。

// Effect -> call the function Api.fetch with `./products` as argument
{
  CALL: {
    fn: Api.fetch,
    args: ['./products']
  }
}

注意： call 只是转换作用，此时异步函数还没有执行。

在测试环节中只需对比结果是否是所期望的纯对象即可：

import { call } from 'redux-saga/effects'
import Api from '...'

const iterator = fetchProducts()

// expects a call instruction
assert.deepEqual(
  iterator.next().value,
  call(Api.fetch, '/products'),
  "fetchProducts should yield an Effect call(Api.fetch, './products')"
)

效用接口 call 同样也适合对象方法：

yield call([obj, obj.method], arg1, arg2, ...) // as if we did obj.method(arg1, arg2 ...)
yield apply(obj, obj.method, [arg1, arg2, ...])

总结：在 redux-saga 中效用对象类似于其他语言中变量，而效用接口 call 等相当于对该对象的声明，效用对象的具体使用则交给了中间件。这种思想即是声明式编程的核心，符合了 React 技术栈的要求。

最后说明一下在 redux-saga 中也提供了 Node 风格的函数转换接口 cps。

2.3. 分发 action 到 Store

接上例，当获取数据后需要分发相应的 action 到 Store 中，可以简单的利用 dispatch 函数：

// ...

function* fetchProducts(dispatch) {
  const products = yield call(Api.fetch, '/products')
  dispatch({ type: 'PRODUCTS_RECEIVED', products })
}

这同样带来了测试的麻烦，是否可以继续沿用异步效用对象声明的方法来处理 action ？ redux-saga 提供了另外一种效用接口 put 来处理分发 action，以此生成分发效用对象：

import { call, put } from 'redux-saga/effects'
// ...

function* fetchProducts() {
  const products = yield call(Api.fetch, '/products')
  // create and yield a dispatch Effect
  yield put({ type: 'PRODUCTS_RECEIVED', products })
}

2.4. 异常处理

这节我们来处理之前例子的异常，假设 Api.fetch 函数返回的 Promise 的状态是 rejected。只需使用 try/catch 语法将 PRODUCTS_REQUEST_FAILED action 发送给 Store：

import Api from './path/to/api'
import { call, put } from 'redux-saga/effects'

// ...

function* fetchProducts() {
  try {
    const products = yield call(Api.fetch, '/products')
    yield put({ type: 'PRODUCTS_RECEIVED', products })
  }
  catch(error) {
    yield put({ type: 'PRODUCTS_REQUEST_FAILED', error })
  }
}

也可以返回一个自定义的信息：

import Api from './path/to最后说明一下jj/api'
import { call, put } from 'redux-saga/effects'

function fetchProductsApi() {
  return Api.fetch('/products')
    .then(response => ({ response }))
    .catch(error => ({ error }))
}

function* fetchProducts() {
  const { response, error } = yield call(fetchProductsApi)
  if (response)
    yield put({ type: 'PRODUCTS_RECEIVED', products: response })
  else
    yield put({ type: 'PRODUCTS_REQUEST_FAILED', error })
}



作者：wlszouc
链接：https://www.jianshu.com/p/f3c7594c4fb4
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

barnett_y
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
SAGA GIS使用教程
GIS_feifei的博客
11-11 6271
使用SAGA GIS免费软件，提取地形湿度指数（topographic wetness index, TWI）和水流功率指数（stream power index, SPI） 等数据，简单易操作。
React高频面试题合集（二）
helloworld1024fd的博客
08-02 266
虚拟DOM(VDOM)是真实DOM在内存中的表示。UI的表示形式保存在内存中，并与实际的DOM同步。这是一个发生在渲染函数被调用和元素在屏幕上显示之间的步骤，整个过程被称为调和。react-redux数据传输∶view–>action–>reducer–>store–>view。view上的AddClick事件通过mapDispatchToProps把数据传到action—>clickaction的ADD传到reducer上代码示例∶import{...
彻彻底底教会你使用Redux-saga(包含样例代码)
weixin_34337381的博客
07-10 1473
Redux-saga使用心得总结（包含样例代码）， 本文的原文地址：原文地址 本文的样例代码地址：样例代码地址 ，欢迎star 最近将项目中redux的中间件，从redux-thunk替换成了redux-saga，做个笔记总结一下redux-saga的使用心得，阅读本文需要了解什么是redux，redux中间件的用处是什么？如果弄懂上述两个概念，就可以继续阅读本文。 redux-thunk...
Redux学习（三）——redux-saga的使用、编写中间件函数、Reducer文件拆分
zep
02-05 1493
一、redux-devtools 我们之前讲过，redux可以方便的让我们对状态进行跟踪和调试，那么如何做到呢？ redux官网为我们提供了redux-devtools的工具； 利用这个工具，我们可以知道每次状态是如何被修改的，修改前后的状态变化等等； 安装该工具需要两步： 第一步：在对应的浏览器中安装相关的插件（比如Chrome浏览器扩展商店中搜索Redux DevTools即可，其他方法可以参考GitHub）； 第二步：在redux中继承devtools的中间件； index.js: imp
eslint-plugin-redux-saga：针对redux-saga的ESLint规则
02-05
用法安装插件：npm npm i -D eslint-plugin-redux-saga 纱yarn add -D eslint-plugin-redux-saga 并将其添加到您的.eslintrc文件中： { " plugins " : [ " redux-saga " ]}规则规则描述推荐的可固定确保产生效果防止...
next-redux-saga：Next.js的redux-saga HOC
02-05
由于next.js不断扩大，并且其他具有更好支持的软件包涵盖了redux-saga SSR功能。 有关更多信息，请参见 。 针对redux-saga HOC。 用于服务器端渲染的受控redux-saga执行。 注意：从4.0.0版开始，不再支持同步HOC...
typed-redux-saga:尝试将更好的TypeScript输入带入redux-saga
03-13
尝试将更好的TypeScript类型带入redux-saga。 需要TypeScript 3.6或更高版本。 安装 # yarn yarn add typed-redux-saga # npm npm install typed-redux-saga 用法 让我们以为例 前 import { call , all } from ...
redux-saga-in-chinese：Redux-saga-中文文档
02-19
Redux-Saga 文档版本号：1.0.0-beta 英文原版： : redux-saga是一个有用的管理应用程序副作用（异步，例如异步获取数据，访问浏览器缓存等）的库，它的目标是让异步管理更容易，执行更高效，测试更简单，在处理...
redux-saga-testing：轻松测试Sagas的方法
02-05
Redux传奇测试 轻松测试Sagas:trade_mark::registered:的方法 示例包括 ， 和 Sagas很难，测试它们就更困难（ Napoleon ） 测试Sagas非常困难，这个小工具的目的是使它们尽可能地接近于测试常规代码。 它应该与您...
记录一篇关于redux-saga的基本使用过程
10-18
主要介绍了记录一篇redux-saga的基本使用过程，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Redux异步处理中间件redux-saga的使用
最新发布
张晓健的博客
05-21 355
使用起来比较简单，在action中处理异步等副作用操作，此时的action是一个函数，以 dispatch，getState作为形参，函数体内的部分可以执行异步。这个的执行原理，当我们页面dispatch的使用，saga.js 会对里面的type 类型进行判断, 如果一样就证明是异步的，你可以去做一些操作，控制数据更新的时机。（2）action是普通对象，这跟redux同步的action一模一样。（5） 异步操作的流程是可以控制的，可以随时取消相应的异步操作。
每天一点面试题（14） ------------Redux-saga
weixin_43718291的博客
12-23 851
5 weppack 7 用到的中间键 8 trunk 9 react16之前版本和16之后版本
Redux-Saga在React工程架构之的应用实践详解
热门推荐
天外野草技术专栏
01-12 2万+
前言React的作用View层次的前端框架，自然少不了很多中间件（Redux Middleware）做数据处理, 而redux-saga就是其中之一，目前这个中间件在网上的资料还是比较少，估计应用的不是很广泛，但是如果使用得当，将会事半功倍的效果，下面仔细介绍一个这个中间件的具体使用流程和应用场景。redux-saga简介Redux-saga是Redux的一个中间件，主要集中处理react架构中的异
redux-saga学习笔记
98猛虎的博客
03-18 383
1、Generator生成器（用一个*号表示）2、yield字段  ：何以不操作相关3、takeEvery是一个辅助函数 可以用来监听action，[javascript] view plain copyyield* takeEvery('FETCH_REQUESTED', fetchData)  如这个表示当监听到type为FETCH_REQUESTED时候触发fechData这个函数。4、ca...
Redux-saga框架使用详解及Demo教程
weixin_33909059的博客
09-03 441
前面我们讲解过redux框架和dva框架的基本使用，因为dva框架中effects模块设计到了redux-saga中的知识点，可能有的同学们会用dva框架，但是对redux-saga又不是很熟悉，今天我们就来简单的讲解下saga框架的主要API和如何配合redux框架使用 redux-saga 官方地址 leonshi.com/redux-saga-… Demo运行效果图 todoList ...
轻松学 Redux-Saga 视频教程（16 个视频）
求知久久编程学院
02-20 420
轻松学 Redux-Saga 视频教程（16 个视频） 轻松学 Redux-Saga #1 课程简介与 Redux-Saga 介绍「07:05」 轻松学 Redux-Saga #2 准备环境和安装 Redux「04:52」 轻松学 Redux-Saga #3 Redux-Saga 的安装和输写第一个 Saga「07:59」 轻松学 Redux-Saga #4 es6 的 generator par...
redux-saga入门
webchang的博客
03-16 3464
redux-saga的介绍、API、使用案例
React学习笔记_Redux-Saga
架构师的成长之路的博客
12-03 4311
Redux-Saga 学习笔记一、Redux-Saga介绍 redux-saga 旨在于更好、更易地解决异步操作（action） redux-saga相当于在Redux原有数据流中多了一层，对Action进行监听，捕获到监听的Action后可以派生一个新的任务对state进行维护 于 redux-thunk 比较：相同点： 可以处理异步操作和协调复杂的dispatch 不同
redux-thunk和redux-saga
03-16
redux-thunk和redux-saga都是用于管理Redux异步操作的中间件。 redux-thunk是Redux官方提供的中间件之一，它允许我们在Redux中进行...但是，redux-saga的学习曲线较陡峭，需要一定的Generator函数和ES6语法的基础。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值