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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • react后台系统最佳实践示例详解

    目录 一.中后台系统的技术栈选型 1. 要做什么 2. 要求 3. 技术栈怎么选 二.hooks时代状态管理库的选型 context redux recoil zustand MobX 三.hooks的使用问题与解决方案 总结 一.中后台系统的技术栈选型 本文主要讲三块内容:中后台系统的技术栈选型.hooks时代状态管理库的选型以及hooks的使用问题与解决方案. 1. 要做什么 我们的目标是搭建一个适用于公司内部中后台系统的前端项目最佳实践. 2. 要求 由于业务需求比较多,一名开发人员需要负

  • react中的ajax封装实例详解

    react中的ajax封装实例详解 代码块 **opts: {'可选参数'} **method: 请求方式:GET/POST,默认值:'GET'; **url: 发送请求的地址, 默认值: 当前页地址; **data: string,json; **async: 是否异步:true/false,默认值:true; **cache: 是否缓存:true/false,默认值:true; **contentType: HTTP头信息,默认值:'application/x-www-form-urlenc

  • 利用CDN加速react webpack打包后的文件详解

    此文不介绍webpack基本配置,如果对基本配置有疑问请查阅官方文档. 1.配置webpack.config.js 将output.publicPath改成上传到的cdn地址, 例(对应上面上传配置): publicPath: "https://your_base_cdn_url" + process.env.NODE_ENV + "/cdn/" 打包 NODE_ENV=production node_modules/webpack/bin/webpack.js -

  • React全家桶环境搭建过程详解

    本文介绍了React全家桶环境搭建过程详解,分享给大家,具体如下: 环境搭建 1.从零开始搭建webpack+react开发环境 2.引入Typescript 安装依赖 npm i -S @types/react @types/react-dom npm i -D typescript awesome-typescript-loader source-map-loader 新建tsconfig.json { "compilerOptions": { "outDir"

  • react国际化化插件react-i18n-auto使用详解

    react-i18n-auto专门为中文国际化提供的自动化方案,快速迭代国际化开发,方法如下 安装 npm install react-i18n-auto --save-dev 第一步:添加babel插件配置(.babelrc添加方式) { "plugins": [ "@babel/plugin-transform-runtime", "react-i18n-auto", "..." ] } 第二步:添加自动化配置 i18n.

  • react.js框架Redux基础案例详解

    react.js框架Redux https://github.com/reactjs/redux 安装: npm install redux react-redux #基于react,我们在前面已经安装过了 Redux参考文档: http://redux.js.org/ Redux核心概念:Store 我们可以简单的理解为就是用来存储 各个组件的State或你自己定义的独立的state,对state进行统一读取.更新.监听等操作. http://redux.js.org/docs/basics/

  • 基于React Hooks的小型状态管理详解

    目录 实现基于 React Hooks 的状态共享 使用感受 本文主要介绍一种基于 React Hooks 的状态共享方案,介绍其实现,并总结一下使用感受,目的是在状态管理方面提供多一种选择方式. 实现基于 React Hooks 的状态共享 React 组件间的状态共享,是一个老生常谈的问题,也有很多解决方案,例如 Redux.MobX 等.这些方案很专业,也经历了时间的考验,但私以为他们不太适合一些不算复杂的项目,反而会引入一些额外的复杂度. 实际上很多时候,我不想定义 mutation 和

  • react redux及redux持久化示例详解

    目录 一.react-redux 二.redux持久化 一.react-redux react-redux依赖于redux工作. 运行安装命令:npm i react-redux: 使用: 将Provider套在入口组件处,并且将自己的store传进去: import FilmRouter from './FilmRouter/index' import {Provider} from 'react-redux' import store from './FilmRouter/views/red

  • React反向代理及样式独立详解

    目录 一.反响代理 1.1 安装 1.2 使用 二.cssModule 一.反响代理 1.1 安装 使用命令:npm install http-proxy-middleware --save 1.2 使用 将之前的Film.js组件改成如下: import React from 'react' import {Route, Redirect, Switch, NavLink} from 'react-router-dom' import NowPlay from './film/NowPlay'

  • react编写可编辑标题示例详解

    目录 需求 初始需求 方案设计 方案一 span + contentEditable 思路 代码如下 在这个方案中遇到的问题 存在的问题 方案二 直接用input处理展示和编辑 踩到的坑 需求 因为自己换工作到了新公司,上周入职,以前没有使用过react框架,虽然前面有学习过react,但是并没有实践经验 这个需求最终的效果是和石墨标题修改实现一样的效果 初始需求 文案支持可编辑 用户点击位置即光标定位处 超过50字读的时候,超出部分进行截断 当用户把所有内容删除时,失去焦点时文案设置为 “无文

随机推荐