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 ...
随机推荐
- Git回滚到指定的commit
查看历史commint $ git log (可以记下sha码) 回退命令: $ git reset --hard HEAD^ 回退到上个版本$ git reset --hard HEAD~3 回退到 ...
- 与Swing的相识
参考自http://c.biancheng.net/swing/ Swing是一个用于Java GUI编程(图形界面设计)的工具包(类库):换句话说,java可以用来开发带界面的PC软件,使用到的工具 ...
- 【Luogu4221】[WC2018] 州区划分
题目链接 题目描述 略 Sol 一个州合法就是州内点形成的子图中 不存在欧拉回路(一个点也算欧拉回路). 这个东西显然就状压 dp 一下: 设 \(f[S]\) 表示当前考虑了 \(S\) 这个集合内 ...
- 【leetcode】837. New 21 Game
题目如下: 解题思路:这个题目有点像爬楼梯问题,只不过楼梯问题要求的计算多少种爬的方式,但是本题是计算概率.因为点数超过或者等于K后就不允许再增加新的点数了,因此我们可以确定最终Alice拥有的点数的 ...
- 查询重复数据group by menu_id having count(menu_id)>1
select * from sys_power_menu WHERE menu_id in ( select menu_id from sys_power_menu group by menu_id ...
- [CSP-S模拟测试]:打扫卫生(暴力)
题目描述 有$N$头奶牛,每头那牛都有一个标号$P_i1\leqslant Pi\leqslant M\leqslant N\leqslant 40,000$.现在$Farmer\ John$要把这 ...
- sed的一些应用
1. sed 使用变量进行替换,注意使用参数 r 时,需要放在参数 i 的前面 下面这个例子是用2.txt中的版本号替换docker-compose.yml中的版本号,其中变量UPGRADE_NAME ...
- 阿里云安装配置yarn,Nginx
1.和npm 相比yarn 的优势在于 1.比npm快.npm是一个个安装包,yarn 是并行安装. 2.npm 可能会有情况 同样的 package.json 文件在不同的机器上安装的包不一样.导致 ...
- 二十四、python中sys模块
'''1.sys.argv:命令行参数List,第一个元素是程序本身路径''' import sys print (sys.argv)-------------------------------[' ...
- 阶段1 语言基础+高级_1-3-Java语言高级_04-集合_09 Debug调试_1_Debug追踪
行号的右边.点击就加上红色的原点 执行后程序停在断点的这一行代码 F8 Shift+F8从方法中出来. F9跳到下一个断点. 终止程序 Ctrl+F2: 断点停留在第一行之后,F8进入下一行代码. 再 ...