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 相关文章推荐
jQuery弹出层插件简化版代码下载
Oct 16 Javascript
JavaScript在多浏览器下for循环的使用方法
Nov 07 Javascript
使用JavaScript 实现各种跨域的方法
May 08 Javascript
通过复制Table生成word和excel的javascript代码
Jan 20 Javascript
JavaScript分析、压缩工具JavaScript Analyser
Dec 31 Javascript
JS使用单链表统计英语单词出现次数
Jun 16 Javascript
浅析JavaScript中的array数组类型系统
Jul 18 Javascript
微信小程序 跳转方式总结
Apr 20 Javascript
node 利用进程通信实现Cluster共享内存
Oct 27 Javascript
Vue写一个简单的倒计时按钮功能
Apr 20 Javascript
如何正确解决VuePress本地访问出现资源报错404的问题
Dec 03 Vue.js
Vue实现简单购物车功能
Dec 13 Vue.js
基于游标的分页接口实现代码示例
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
ADODB结合SMARTY使用~超级强
2006/11/25 PHP
php中用foreach来操作数组的代码
2011/07/17 PHP
解决php的“It is not safe to rely on the system’s timezone settings”问题
2015/10/08 PHP
PHP在线打包下载功能示例
2016/10/15 PHP
accesskey 提交
2006/06/26 Javascript
document.all还是document.getElementsByName?
2006/07/21 Javascript
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
2013/01/27 Javascript
Javascript编写2048小游戏
2015/07/07 Javascript
Bootstrap树形控件使用方法详解
2016/01/27 Javascript
JavaScript事件学习小结(三)js事件对象
2016/06/09 Javascript
基于Vue.js实现数字拼图游戏
2016/08/02 Javascript
谈谈JavaScript的New关键字
2016/08/26 Javascript
利用jquery实现实时更新歌词的方法
2017/01/06 Javascript
canvas绘制的直线动画
2017/01/23 Javascript
javascript设计模式之单体模式学习笔记
2017/02/15 Javascript
详解Vue2.0里过滤器容易踩到的坑
2017/06/01 Javascript
使用async-validator编写Form组件的方法
2018/01/10 Javascript
webpack引入eslint配置详解
2018/01/22 Javascript
webuploader实现上传图片到服务器功能
2018/08/16 Javascript
js中数组对象去重的两种方法
2019/01/18 Javascript
vue结合el-upload实现腾讯云视频上传功能
2020/07/01 Javascript
NodeJS模块Buffer原理及使用方法解析
2020/11/11 NodeJs
选择python进行数据分析的理由和优势
2019/06/25 Python
python里dict变成list实例方法
2019/06/26 Python
python递归下载文件夹下所有文件
2019/08/31 Python
opencv3/C++实现视频读取、视频写入
2019/12/11 Python
python3 requests库实现多图片爬取教程
2019/12/18 Python
python中id函数运行方式
2020/07/03 Python
Html5 实现微信分享及自定义内容的流程
2019/08/20 HTML / CSS
葡萄牙鞋子品牌:Fair
2016/12/10 全球购物
大学本科毕业生的自我鉴定范文
2013/11/19 职场文书
教师节促销活动方案
2014/02/14 职场文书
地理教师岗位职责
2014/03/16 职场文书
社区党员群众路线教育实践活动心得体会
2014/11/03 职场文书
您对思维方式了解多少?
2019/12/09 职场文书
vue-cli4.5.x快速搭建项目
2021/05/30 Vue.js