React手稿之 React-Saga
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;
}
}
推荐阅读React 手稿
React手稿之 React-Saga的更多相关文章
- React 手稿 - Component state
Component state 实例: import React, { PureComponent } from 'react'; export default class extends PureC ...
- React手稿 - Context
Context Context提供了除props之外的传参数的方式. Context是全局跨组件传递数据的. API React.createContext ``` const {Provider, ...
- React手稿之State Hooks of Hooks
React Hooks React在16.7.0-alpha.0版本中提到了Hooks的概念,目前还是Proposal阶段. 官方也陈述,接下来的90%的工作会投入到React Hooks中. 从目前 ...
- react系列从零开始-react介绍
react算是目前最火的js MVC框架了,写一个react系列的博客,顺便回忆一下react的基础知识,新入门前端的小白,可以持续关注,我会从零开始教大家用react开发一个完整的项目,也会涉及到w ...
- [react] 细数 React 的原罪
Props & onChange 的原罪 .「props & onChange 接口规范」它不是一个典型的「程序接口规范」. 当你拿到一个可视组件的 ref,却没有类似 setProp ...
- 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 ...
- React笔记:React基础(2)
1. JSX JSX是一种拥有描述UI的JavaScript扩展语法,React使用这种语法描述组件的UI. 1.1 基本语法 JSX可以嵌套多个HTML标签,可以使用大部分符号HTML规范的属性. ...
- [React] 从零开始的react
组件 1. 无状态组件 在React中,组件的名字必须用大写字母开头,而包含该组件定义的文件名也应该是大写字母(便于区分,也可以不是). 无状态组件是纯展示组件,仅仅只是用于数据的展示,只根据传入的p ...
- React 学习(一) ---- React Element /组件/JSX
学习React的时候,你可能听到最多的就是要先学习webpack, babel,要先学会配置然后才能学react 等等,一堆的配置就把我们吓着了,根本就没有心情就学习react了.其实在最开始学习re ...
随机推荐
- zabbix监控A主机到B主机的网络质量
采用zabbix自带的icmp ping即可进行监控: 1.安装fping 2.将fping安装后链接到/usr/sbin/fping下,设置组为zabbix; 3.增加监控项:icmpping[ip ...
- SpringMVC最新教程IDEA版
1.servlet项目结构与识别 Idea里带个蓝点的文件夹为tomcat吃的网站内容,idea会通过“Web Resource Directory”来标注,会被打成一个war包 这个文件夹里,MET ...
- 层定位layer
一.如何实现层定位position属性 二.相对定位relative 三.绝对定位absolute 四.元素堆叠z-index 一.实现层定位的方法 position属性实现层定位,把元素分出层次形成 ...
- Anaconda-navigator 打不开的解决方法(亲测有效!)
本文链接:https://blog.csdn.net/qq_42489092/article/details/92208822method_1:每当你打不开应用时,不妨试一下:用管理员身份运行 请用管 ...
- [洛谷P3939]:数颜色(二分)
题目传送门 题目描述 小$C$的兔子不是雪白的,而是五彩缤纷的.每只兔子都有一种颜色,不同的兔子可能有相同的颜色.小$C$把她标号从$1$到$n$的$n$只兔子排成长长的一排,来给他们喂胡萝卜吃.排列 ...
- CentOS和Windows互相远程桌面方法
https://blog.csdn.net/libaineu2004/article/details/49407883
- Flask中的实例化配置
也就是在app=Flask(__name__)括号中的参数 1.static_folder = 'static', # 静态文件目录的路径 默认当前项目中的static目录 2.static_url_ ...
- 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 ...
- 07 归档模式 Active redo log丢失或损坏的恢复
环境同上一篇 模拟处于active状态的redo log损坏 sesion 1 SYS@ orcl >/ GROUP# THREAD# SEQUENCE# BYTES BLOCKSIZE MEM ...
- c# 动态加载tlb为程序集
private enum RegKind { RegKind_Default = , RegKind_Register = , RegKind_None = } [DllImport("ol ...