Redux-Saga

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

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

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

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;
}
}

在线示例

推荐阅读React 手稿

React手稿之 React-Saga的更多相关文章

  1. React 手稿 - Component state

    Component state 实例: import React, { PureComponent } from 'react'; export default class extends PureC ...

  2. React手稿 - Context

    Context Context提供了除props之外的传参数的方式. Context是全局跨组件传递数据的. API React.createContext ``` const {Provider, ...

  3. React手稿之State Hooks of Hooks

    React Hooks React在16.7.0-alpha.0版本中提到了Hooks的概念,目前还是Proposal阶段. 官方也陈述,接下来的90%的工作会投入到React Hooks中. 从目前 ...

  4. react系列从零开始-react介绍

    react算是目前最火的js MVC框架了,写一个react系列的博客,顺便回忆一下react的基础知识,新入门前端的小白,可以持续关注,我会从零开始教大家用react开发一个完整的项目,也会涉及到w ...

  5. [react] 细数 React 的原罪

    Props & onChange 的原罪 .「props & onChange 接口规范」它不是一个典型的「程序接口规范」. 当你拿到一个可视组件的 ref,却没有类似 setProp ...

  6. React Native & react-native-web-player & React Native for Web

    React Native & react-native-web-player & React Native for Web https://github.com/dabbott/rea ...

  7. React笔记:React基础(2)

    1. JSX JSX是一种拥有描述UI的JavaScript扩展语法,React使用这种语法描述组件的UI. 1.1 基本语法 JSX可以嵌套多个HTML标签,可以使用大部分符号HTML规范的属性. ...

  8. [React] 从零开始的react

    组件 1. 无状态组件 在React中,组件的名字必须用大写字母开头,而包含该组件定义的文件名也应该是大写字母(便于区分,也可以不是). 无状态组件是纯展示组件,仅仅只是用于数据的展示,只根据传入的p ...

  9. React 学习(一) ---- React Element /组件/JSX

    学习React的时候,你可能听到最多的就是要先学习webpack, babel,要先学会配置然后才能学react 等等,一堆的配置就把我们吓着了,根本就没有心情就学习react了.其实在最开始学习re ...

随机推荐

  1. CSS盒模型面试知识点

    一.基本概念 1.基本概念:标准盒模型+怪异盒模型(IE模型) 基本组成:由margin.padding.content组成. 2.标准盒模型和IE模型的区别 标准盒模型中width指的是内容区域co ...

  2. Android与IOS的优缺点比较 对 Android 与 IOS 比较是个个人的问题。 就好比我来说,我两个都用。我深知这两个平台的优缺点。所以,我决定分享我关于这两个移动平台的观点。另外,然后谈谈我对新的 Ubuntu 移动平台的印象和它的优势。 IOS 的优点 虽然这些天我是个十足的 Android 用户,但我必须承认 IOS 在某些方面做的是不错。首先,苹果公司在他们的设备更新方面有更

    Android与IOS的优缺点比较 对 Android 与 IOS 比较是个个人的问题. 就好比我来说,我两个都用.我深知这两个平台的优缺点.所以,我决定分享我关于这两个移动平台的观点.另外,然后谈谈 ...

  3. 【翻译】详解HTML5 自定义 Data 属性

    原标题:HTML5 Custom Data Attributes (data-*) 你是否曾经使用 class 或 rel 来保存任意的元数据,只为了使你的JavaScript更简单?如果你回答是的, ...

  4. android读取xml

    /*** 从config.xml中获取版本信息以及应用id* * @param urlPath* @return* @throws Exception*/public List getUpdateIn ...

  5. 3D Computer Grapihcs Using OpenGL - 02 QGLWidget

    用红色来填充GLWidget窗口 修改MyGlWindow.h,添加两个函数,一个用来初始化OpengGL,一个用来绘制OpenGL #pragma once #include <QtOpenG ...

  6. idea生成get/set方法

    如图:

  7. k8s上的基础概念和术语

    kubernetes基本概念和术语   kubeernetes中的大部分概念如Node,Pod,Replication Controller ,Serverce等都可以看作一种“资源对象”,几乎所有的 ...

  8. Linux shell - 重命名文件和文件夹(mv)

    linux下重命名文件或文件夹的命令mv既可以重命名,又可以移动文件或文件夹. 例子:将目录A重命名为B mv A B 例子:将/a目录移动到/b下,并重命名为c mv /a /b/c

  9. scroll-view组件

    <scroll-view></scroll-view> 组件 这个组件的属性:(是要不说属性值,写不写都可以(建议不写)) scroll-x:允许横向滚动 (如果你设这个属性就 ...

  10. 家用路由器网络设置DMZ区

    2分钟看懂DMZ区 装载 原文链接 最近看到一个名词“DMZ区”,一直充满疑问,今天对其进行了查询,理解如下: 1.DMZ是什么? 英文全名“Demilitarized Zone”,中文含义是“隔离区 ...