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 相关文章推荐
详解JavaScript中undefined与null的区别
Mar 29 Javascript
AspNet中使用JQuery boxy插件的确认框
May 20 Javascript
JavaScript实现级联菜单的方法
Jun 29 Javascript
JS实现带提示的星级评分效果完整实例
Oct 30 Javascript
js ajaxfileupload.js上传报错的解决方法
May 05 Javascript
Node.js中npm常用命令大全
Jun 09 Javascript
js制作可以延时消失的菜单
Jan 13 Javascript
微信小程序-获得用户输入内容
Feb 13 Javascript
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
Jun 17 Javascript
详解VUE 对element-ui中的ElTableColumn扩展
Mar 28 Javascript
Vue数据监听方法watch的使用
Mar 28 Javascript
vue 页面回退mounted函数不执行的解决方案
Jul 26 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
点评山进PR-D3L三波段收音机
2021/03/02 无线电
PHP大批量插入数据库的3种方法和速度对比
2014/07/08 PHP
php-fpm开启状态统计的方法详解
2017/06/23 PHP
PHP扩展安装方法步骤解析
2020/11/24 PHP
javascript面向对象之Javascript 继承
2010/05/04 Javascript
Javascript学习笔记-详解in运算符
2011/09/13 Javascript
js根据给定的日期计算当月有多少天实现思路及代码
2013/02/25 Javascript
Nodejs+express+html5 实现拖拽上传
2014/08/08 NodeJs
初识Javascript小结
2015/07/16 Javascript
实例详解JavaScript获取链接参数的方法
2016/01/01 Javascript
高效Web开发的10个jQuery代码片段
2016/07/22 Javascript
AngularJS中isolate scope的用法分析
2016/11/22 Javascript
简单的vue-resourse获取json并应用到模板示例
2017/02/10 Javascript
采用python实现简单QQ单用户机器人的方法
2014/07/03 Python
Python使用Scrapy爬取妹子图
2015/05/28 Python
python使用os.listdir和os.walk获得文件的路径的方法
2017/12/16 Python
用python实现百度翻译的示例代码
2018/03/09 Python
Python3 单行多行万能正则匹配方法
2019/01/07 Python
Python使用修饰器进行异常日志记录操作示例
2019/03/19 Python
python 设置xlabel,ylabel 坐标轴字体大小,字体类型
2019/07/23 Python
django之对FileField字段的upload_to的设定方法
2019/07/28 Python
下载官网python并安装的步骤详解
2019/10/12 Python
python3 求约数的实例
2019/12/05 Python
DAWGS鞋官方网站:鞋,凉鞋,靴子
2016/10/04 全球购物
JackJones官方旗舰店:杰克琼斯男装
2018/03/27 全球购物
有机婴儿毛毯和衣服:Monica + Andy
2020/03/01 全球购物
社区优秀志愿者材料
2014/02/02 职场文书
草船借箭教学反思
2014/02/03 职场文书
学生生病请假条范文
2014/02/16 职场文书
创建文明学校实施方案
2014/03/11 职场文书
森林防火标语
2014/06/23 职场文书
六一儿童节标语
2014/10/08 职场文书
党的群众路线教育实践活动心得体会范文
2014/11/05 职场文书
优秀党员先进事迹材料
2014/12/18 职场文书
幼儿园中秋节活动总结
2015/03/23 职场文书
教你怎么用PyCharm为同一服务器配置多个python解释器
2021/05/31 Python