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 写类方式之八
Jul 05 Javascript
jQuery+ajax实现顶一下,踩一下效果
Jul 17 Javascript
浅谈JavaScript之事件绑定
Jul 08 Javascript
浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法
May 11 Javascript
教你用AngularJS框架一行JS代码实现控件验证效果
Jun 23 Javascript
浅析Node.js中使用依赖注入的相关问题及解决方法
Jun 24 Javascript
简单的js表格操作
Sep 24 Javascript
微信小程序 数据访问实例详解
Oct 08 Javascript
详解用vue-cli来搭建vue项目和webpack
Apr 20 Javascript
angularJs中ng-model-options设置数据同步的方法
Sep 30 Javascript
Openlayers绘制聚合标注
Sep 28 Javascript
vue如何批量引入组件、注册和使用详解
May 12 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
在WordPress的后台中添加顶级菜单和子菜单的函数详解
2016/01/11 PHP
php支持断点续传、分块下载的类
2016/05/02 PHP
php编译安装php-amq扩展简明教程
2016/06/25 PHP
laravel-admin 后台表格筛选设置默认的查询日期方法
2019/10/03 PHP
Laravel5.1 框架控制器基础用法实例分析
2020/01/04 PHP
在iframe里的页面编写js,实现在父窗口上创建动画效果展开和收缩的div(不变动iframe父窗口代码)
2011/12/20 Javascript
js浏览器本地存储store.js介绍及应用
2014/05/13 Javascript
nodejs中实现阻塞实例
2015/03/24 NodeJs
JS获取时间的相关函数及时间戳与时间日期之间的转换
2016/02/04 Javascript
js获取指定字符前/后的字符串简单实例
2016/10/27 Javascript
vue登录注册及token验证实现代码
2017/12/14 Javascript
JS基于开关思想实现的数组去重功能【案例】
2019/02/18 Javascript
Layui tree 下拉菜单树的实例代码
2019/09/21 Javascript
vue-cli3使用mock数据的方法分析
2020/03/16 Javascript
python打开网页和暂停实例
2014/09/30 Python
python在windows下创建隐藏窗口子进程的方法
2015/06/04 Python
python实现多线程抓取知乎用户
2016/12/12 Python
python下载微信公众号相关文章
2019/02/26 Python
详解从Django Allauth中进行登录改造小结
2019/12/18 Python
Keras官方中文文档:性能评估Metrices详解
2020/06/15 Python
Python CategoricalDtype自定义排序实现原理解析
2020/09/11 Python
Python3.9新特性详解
2020/10/10 Python
Baracuta官方网站:Harrington夹克,G9,G4,G10等
2018/03/06 全球购物
J2EE相关知识面试题
2013/08/26 面试题
医学院四年学习生活的自我评价
2013/11/06 职场文书
幼儿园元旦活动感言
2014/03/02 职场文书
校园活动策划方案
2014/06/13 职场文书
高中学校对照检查材料
2014/08/31 职场文书
机械制造专业大学生自我鉴定
2014/09/19 职场文书
红色革命电影观后感
2015/06/18 职场文书
2015年秋季开学典礼校长致辞
2015/07/16 职场文书
小学语文教师研修日志
2015/11/13 职场文书
安全教育培训心得体会
2016/01/15 职场文书
个人业务学习心得体会
2016/01/25 职场文书
2016年六一文艺汇演开幕词
2016/03/04 职场文书
python 闭包函数详细介绍
2022/04/19 Python