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 ...
随机推荐
- CSS盒模型面试知识点
一.基本概念 1.基本概念:标准盒模型+怪异盒模型(IE模型) 基本组成:由margin.padding.content组成. 2.标准盒模型和IE模型的区别 标准盒模型中width指的是内容区域co ...
- Android与IOS的优缺点比较 对 Android 与 IOS 比较是个个人的问题。 就好比我来说,我两个都用。我深知这两个平台的优缺点。所以,我决定分享我关于这两个移动平台的观点。另外,然后谈谈我对新的 Ubuntu 移动平台的印象和它的优势。 IOS 的优点 虽然这些天我是个十足的 Android 用户,但我必须承认 IOS 在某些方面做的是不错。首先,苹果公司在他们的设备更新方面有更
Android与IOS的优缺点比较 对 Android 与 IOS 比较是个个人的问题. 就好比我来说,我两个都用.我深知这两个平台的优缺点.所以,我决定分享我关于这两个移动平台的观点.另外,然后谈谈 ...
- 【翻译】详解HTML5 自定义 Data 属性
原标题:HTML5 Custom Data Attributes (data-*) 你是否曾经使用 class 或 rel 来保存任意的元数据,只为了使你的JavaScript更简单?如果你回答是的, ...
- android读取xml
/*** 从config.xml中获取版本信息以及应用id* * @param urlPath* @return* @throws Exception*/public List getUpdateIn ...
- 3D Computer Grapihcs Using OpenGL - 02 QGLWidget
用红色来填充GLWidget窗口 修改MyGlWindow.h,添加两个函数,一个用来初始化OpengGL,一个用来绘制OpenGL #pragma once #include <QtOpenG ...
- idea生成get/set方法
如图:
- k8s上的基础概念和术语
kubernetes基本概念和术语 kubeernetes中的大部分概念如Node,Pod,Replication Controller ,Serverce等都可以看作一种“资源对象”,几乎所有的 ...
- Linux shell - 重命名文件和文件夹(mv)
linux下重命名文件或文件夹的命令mv既可以重命名,又可以移动文件或文件夹. 例子:将目录A重命名为B mv A B 例子:将/a目录移动到/b下,并重命名为c mv /a /b/c
- scroll-view组件
<scroll-view></scroll-view> 组件 这个组件的属性:(是要不说属性值,写不写都可以(建议不写)) scroll-x:允许横向滚动 (如果你设这个属性就 ...
- 家用路由器网络设置DMZ区
2分钟看懂DMZ区 装载 原文链接 最近看到一个名词“DMZ区”,一直充满疑问,今天对其进行了查询,理解如下: 1.DMZ是什么? 英文全名“Demilitarized Zone”,中文含义是“隔离区 ...