React手稿之 React-Saga的详解


Posted in Javascript onNovember 12, 2018

Redux-Saga

redux-saga 是一个用于管理应用程序副作用(例如异步获取数据,访问浏览器缓存等)的javascript库,它的目标是让副作用管理更容易,执行更高效,测试更简单,处理故障更容易。

redux-saga相当于一个放置在action与reducer中的垫片。

之所以称之谓副作用呢,就是为了不让触发一个action时,立即执行reducer。也就是在action与reducer之间做一个事情,比如异步获取数据等。

redux-saga使用了ES6中的Generator功能,避免了像redux-thunk的回调地狱。

如何使用

安装

$ npm install --save redux-saga
//或者
$ yarn add redux-saga

示例

假设有一个UI界面,是根据用户ID显示用户详情的。那么我们需要通过接口从数据库根据userId来获取数据。

简单起见,我们在本地使用一个json文件来模拟数据库数据。

{
 "297ee83e-4d15-4eb7-8106-e1e5e212933c": {
  "username": "Saga"
 }
}

创建UI Component

import React from 'react';
import { USER_FETCH_REQUESTED } from '../../../actions/User';

export default class extends React.Component {

 constructor(props) {
  super(props);
  this.state = { userId: '297ee83e-4d15-4eb7-8106-e1e5e212933c' }
 }

 render() {
  const { userInfo = {}, dispatch } = this.props;
  return (
   <React.Fragment>
    <button onClick={() => {
     dispatch({ type: USER_FETCH_REQUESTED, payload: { userId: this.state.userId } });
    }}>Get User Info</button> <span>用户名: {userInfo.username}</span>
   </React.Fragment>
  );
 }
}

创建saga,这里的saga就相当于action.

import { call, put, takeEvery } from 'redux-saga/effects'
import { fetchUserApi } from '../api/user';
import { USER_FETCH_REQUESTED, USER_FETCH_SUCCEEDED, USER_FETCH_FAILED } from '../actions/User';

function* fetchUser({ payload }) {
 try {
  const user = yield call(fetchUserApi, payload.userId);
  yield put({ type: USER_FETCH_SUCCEEDED, user });
 } catch (e) {
  yield put({ type: USER_FETCH_FAILED, message: e.message });
 }
}

const userSaga = function* () {
 yield takeEvery(USER_FETCH_REQUESTED, fetchUser);
}

export default userSaga;

关于fetchUserApi,我们会在后面的章节中描述。这里仅获取了json文件中与userId相对应的数据。

把saga放入store中:

import createSagaMiddleware from 'redux-saga';
import Sagas from '../sagas/index';

const sagaMiddleware = createSagaMiddleware()
const store = createStore(
 reducer,
 applyMiddleware(sagaMiddleware)
)
sagaMiddleware.run(Sagas)

最后再实现相就的reducer即可:

import { USER_FETCH_SUCCEEDED } from '../actions/User';

const initialState = { user: {} };

export default (state = initialState, action) => {
 switch (action.type) {
  case USER_FETCH_SUCCEEDED:
   return { ...state, user: action.user };
  default:
   return state;
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
(JS实现)MapBar中坐标的加密和解密的脚本
May 16 Javascript
WordPress 照片lightbox效果的运用几点
Jun 22 Javascript
JS getMonth()日期函数的值域是0-11
Feb 15 Javascript
Jquery插件之多图片异步上传
Oct 20 Javascript
扩展jquery实现客户端表格的分页、排序功能代码
Mar 16 Javascript
jquery禁用右键单击功能屏蔽F5刷新
Mar 17 Javascript
node.js正则表达式获取网页中所有链接的代码实例
Jun 03 Javascript
Jquery结合HTML5实现文件上传
Jun 25 Javascript
JS生成一维码(条形码)功能示例
Jan 19 Javascript
jQuery实现table中两列CheckBox只能选中一个的示例
Sep 22 jQuery
jQuery实现基本淡入淡出效果的方法详解
Sep 05 jQuery
为vue项目自动设置请求状态的配置方法
Jun 09 Javascript
基于游标的分页接口实现代码示例
Nov 12 #Javascript
React Hooks的深入理解与使用
Nov 12 #Javascript
详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)
Nov 12 #Javascript
jQuery 操作 HTML 元素和属性的方法
Nov 12 #jQuery
微信小程序左滑删除功能开发案例详解
Nov 12 #Javascript
微信运维交互机器人的示例代码
Nov 12 #Javascript
用jQuery将JavaScript对象转换为querystring查询字符串的方法
Nov 12 #jQuery
You might like
PHP 身份证号验证函数
2009/05/07 PHP
php中error与exception的区别及应用
2014/07/28 PHP
深入理解PHP内核(二)之SAPI探究
2015/11/10 PHP
php实现批量修改文件名称的方法
2016/07/23 PHP
360搜索引擎自动收录php改写方案
2018/04/28 PHP
jQuery ajax(复习)—Baidu ajax request分离版
2013/01/24 Javascript
浅谈NodeJS中require路径问题
2015/05/07 NodeJs
javascript字符串与数组转换汇总
2015/05/26 Javascript
javascript实现C语言经典程序题
2015/11/29 Javascript
深入浅析JS的数组遍历方法(推荐)
2016/06/15 Javascript
JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】
2018/04/19 Javascript
详解Nodejs内存治理
2018/05/13 NodeJs
JavaScript链式调用实例浅析
2018/12/19 Javascript
ionic4+angular7+cordova上传图片功能的实例代码
2019/06/19 Javascript
layui写后台表格思路和赋值用法详解
2019/11/14 Javascript
vue 组件简介
2020/07/31 Javascript
解决vue scoped html样式无效的问题
2020/10/24 Javascript
vue表单验证之禁止input输入框输入空格
2020/12/03 Vue.js
python pdb调试方法分享
2014/01/21 Python
python爬取亚马逊书籍信息代码分享
2017/12/09 Python
Python使用matplotlib绘制余弦的散点图示例
2018/03/14 Python
Python算法中的时间复杂度问题
2019/11/19 Python
python logging 日志的级别调整方式
2020/02/21 Python
Pandas对每个分组应用apply函数的实现
2020/12/13 Python
西班牙美妆电商:Perfume’s Club(有中文站)
2018/08/08 全球购物
匈牙利最大的健身制造商和销售商:inSPORTline
2018/10/30 全球购物
世界顶级户外运动品牌折扣网站:LeftLane Sports
2019/06/12 全球购物
Bath & Body Works阿联酋:在线购买沐浴和身体用品
2021/02/27 全球购物
四议两公开实施方案
2014/03/28 职场文书
创先争优活动心得体会
2014/09/04 职场文书
预备党员对照检查材料思想汇报
2014/09/24 职场文书
单位作风建设自查报告
2014/10/23 职场文书
党员志愿者服务倡议书
2015/04/29 职场文书
班主任班级管理心得体会
2016/01/07 职场文书
golang中的并发和并行
2021/05/08 Golang
python机器学习创建基于规则聊天机器人过程示例详解
2021/11/02 Python