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. zabbix监控A主机到B主机的网络质量

    采用zabbix自带的icmp ping即可进行监控: 1.安装fping 2.将fping安装后链接到/usr/sbin/fping下,设置组为zabbix; 3.增加监控项:icmpping[ip ...

  2. SpringMVC最新教程IDEA版

    1.servlet项目结构与识别 Idea里带个蓝点的文件夹为tomcat吃的网站内容,idea会通过“Web Resource Directory”来标注,会被打成一个war包 这个文件夹里,MET ...

  3. 层定位layer

    一.如何实现层定位position属性 二.相对定位relative 三.绝对定位absolute 四.元素堆叠z-index 一.实现层定位的方法 position属性实现层定位,把元素分出层次形成 ...

  4. Anaconda-navigator 打不开的解决方法(亲测有效!)

    本文链接:https://blog.csdn.net/qq_42489092/article/details/92208822method_1:每当你打不开应用时,不妨试一下:用管理员身份运行 请用管 ...

  5. [洛谷P3939]:数颜色(二分)

    题目传送门 题目描述 小$C$的兔子不是雪白的,而是五彩缤纷的.每只兔子都有一种颜色,不同的兔子可能有相同的颜色.小$C$把她标号从$1$到$n$的$n$只兔子排成长长的一排,来给他们喂胡萝卜吃.排列 ...

  6. CentOS和Windows互相远程桌面方法

    https://blog.csdn.net/libaineu2004/article/details/49407883

  7. Flask中的实例化配置

    也就是在app=Flask(__name__)括号中的参数 1.static_folder = 'static', # 静态文件目录的路径 默认当前项目中的static目录 2.static_url_ ...

  8. adbl连接不上 daemon not running. starting it now on port 5037 ADB server didn't ACK

     http://blog.csdn.net/prettyice2005/article/details/38682443 adbl连接不上 daemon not running. starting i ...

  9. 07 归档模式 Active redo log丢失或损坏的恢复

    环境同上一篇 模拟处于active状态的redo log损坏 sesion 1 SYS@ orcl >/ GROUP# THREAD# SEQUENCE# BYTES BLOCKSIZE MEM ...

  10. c# 动态加载tlb为程序集

    private enum RegKind { RegKind_Default = , RegKind_Register = , RegKind_None = } [DllImport("ol ...