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全选功能
Nov 07 Javascript
JavaScript中的Math.atan2()方法使用详解
Jun 15 Javascript
深入理解JavaScript中的浮点数
May 18 Javascript
微信小程序实战之轮播图(3)
Apr 17 Javascript
jQuery实现web页面樱花坠落的特效
Jun 01 jQuery
基于Vue2.X的路由和钩子函数详解
Feb 09 Javascript
vue写一个组件
Apr 09 Javascript
webpack的CSS加载器的使用
Sep 11 Javascript
详解用vue2.x版本+adminLTE开源框架搭建后台应用模版
Mar 15 Javascript
Node 搭建一个静态资源服务器的实现
May 20 Javascript
JavaScript常用内置对象用法分析
Jul 09 Javascript
JavaScript 预解析的4种实现方法解析
Sep 03 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
ajax缓存问题解决途径
2006/12/06 PHP
PHP设计模式之装饰者模式代码实例
2015/05/11 PHP
详谈PHP编码转换问题
2015/07/28 PHP
PHP常用操作类之通信数据封装类的实现
2017/07/16 PHP
PHP页面静态化――纯静态与伪静态用法详解
2020/06/05 PHP
js继承 Base类的源码解析
2008/12/30 Javascript
jQuery实现图片信息的浮动显示实例代码
2013/08/28 Javascript
关于javaScript注册click事件传递参数的不成功问题
2014/07/18 Javascript
JS函数this的用法实例分析
2015/02/05 Javascript
推荐10 个很棒的 jQuery 特效代码
2015/10/04 Javascript
向JavaScript的数组中添加元素的方法小结
2015/10/24 Javascript
JavaScript编程中window的location与history对象详解
2015/10/26 Javascript
Javascript实现跑马灯效果的简单实例
2016/05/31 Javascript
JS锚点的设置与使用方法
2016/09/05 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
2016/12/02 Javascript
微信小程序 页面跳转和数据传递实例详解
2017/01/19 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(1)
2017/02/20 Javascript
Three.js 再探 - 写一个微信跳一跳极简版游戏
2018/01/04 Javascript
基于JavaScript实现十五拼图代码实例
2020/04/26 Javascript
Python中还原JavaScript的escape函数编码后字符串的方法
2014/08/22 Python
安装Python的web.py框架并从hello world开始编程
2015/04/25 Python
Linux下为不同版本python安装第三方库
2016/08/31 Python
python创建列表和向列表添加元素的实现方法
2017/12/25 Python
python和shell获取文本内容的方法
2018/06/05 Python
pandas.dataframe按行索引表达式选取方法
2018/10/30 Python
django多个APP的urls设置方法(views重复问题解决)
2019/07/19 Python
用python对oracle进行简单性能测试
2020/12/05 Python
使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法
2016/07/08 HTML / CSS
HTML5中外部浏览器唤起微信分享
2020/01/02 HTML / CSS
英国领先的运动物理治疗供应公司:Vivomed
2018/07/14 全球购物
法国滑雪假期的专家:Ski Planet
2019/11/02 全球购物
2014年班主任德育工作总结
2014/12/05 职场文书
银行中层干部培训心得体会
2016/01/11 职场文书
导游词之云南丽江-泸沽湖
2019/09/26 职场文书
如何使用分区处理MySQL的亿级数据优化
2021/06/18 MySQL
Windows Server 2016服务器用户管理及远程授权图文教程
2022/08/14 Servers