Redux-saga

1.概述

edux-saga是一个用于管理redux应用异步操作的中间件，redux-saga通过创建sagas将所有异步操作逻辑收集在一个地方集中处理，可以用来代替redux-thunk中间件。

2.流程

1. ui组件触发action创建函数
2. action创建函数返回一个action
3. action被传入redux中间件(被 saga等中间件处理) ，产生新的action，传入reducer
4. reducer把数据传给ui组件显示
5. mapStateToProps
6. ui组件显示

3.使用

• 3.1 配置

store.js


import {createStore,combineReducers, applyMiddleware} from 'redux';
import userNameReducer from '../username/reducer.js';
import createSagaMiddleware from 'redux-saga';       // 引入redux-saga中的createSagaMiddleware函数
import rootSaga from './saga.js';                    // 引入saga.js

const sagaMiddleware = createSagaMiddleware()        // 执行

const reducerAll = {
    userNameReducer: userNameReducer
}


export const store = createStore(
    combineReducers({...reducerAll}),               // 合并reducer
    window.devToolsExtension ? window.devToolsExtension() : undefined,    // dev-tools
    applyMiddleware(sagaMiddleware)                 // 中间件，加载sagaMiddleware
)

sagaMiddleware.run(rootSaga)                        // 执行rootSaga

• 3.2 ui组件触发action创建函数

// username.js
import React from 'react';

export default class User extends React.Component {
   componentDidMount() {
       console.log(this.props)
   }
   go = () => {
       this.props.getAges(3)           // 发起action，传入参数
   }
   render() {
       return (
           <div>
               这是username组件
               <div>
                   {
                       this.props.username.userNameReducer.username
                   }
               </div>
               <br/>
               <div onClick={this.go}>
                   点击获取提交age
               </div>
           </div>
       )
   }
}

• 3.3 action创建函数，返回action ----> 传入saga ( 如果没有saga,就该传入reducer )

// action.js
import { actionTypes } from './constant.js';

export function getAges(age) {
   console.log(age,'age') // 3
   return {
       type: actionTypes.GET_AGE,
       payload: age
   }
}

• 3.4 saga.js ------> 捕获action创建函数返回的action

// saga.js

import { actionTypes } from '../username/constant.js';
import {call, put, takeEvery} from 'redux-saga/effects';     // 引入相关函数

function* goAge(action){    // 参数是action创建函数返回的action
   console.log(action)
   const p = function() {
       return fetch(`http://image.baidu.com/channel/listjson?rn=${action.payload}...`,{
           method: 'GET'
       })
       .then(res => res.json())
       .then(res => {
           console.log(res)
           return res
       })
   }
   const res = yield call(p)    // 执行p函数，返回值赋值给res

   yield put({      // dispatch一个action到reducer， payload是请求返回的数据
       type: actionTypes.GET_AGE_SUCCESS,
       payload: res   
   })
}

function* rootSaga() {     // 在store.js中，执行了 sagaMiddleware.run(rootSaga)
   yield takeEvery(actionTypes.GET_AGE, goAge)   // 如果有对应type的action触发，就执行goAge()函数
}

export default rootSaga;      // 导出rootSaga，被store.js文件import

• 3.5 然后由ui组件从reducer中获取数据，并显示。。。

4.名词解释

• Effect

  一个effect就是一个纯文本javascript对象，包含一些将被saga middleware执行的指令。

• Task

  一个 task 就像是一个在后台运行的进程，在基于redux-saga的应用程序中，可以同时运行多个task

• 阻塞调用 和 非组塞调用

  阻塞调用:阻塞调用的意思是： saga 会在 yield 了 effect 后会等待其执行结果返回，结果返回后才恢复执行 generator 中的下一个指令
  非阻塞调用:非阻塞调用的意思是： saga 会在 yield effect 之后立即恢复执行

• watcher 和 worker

  watcher：监听发起的action 并在每次接收到action时 fork 一个 work
  worker： 处理action，并结束它

• Effect

5.常用API

• 5.1 createSagaMiddleware(…sagas)

  • createSagaMiddleware的作用是创建一个redux中间件，并将sagas与Redux store建立链接
  • 参数是一个数组，里面是generator函数列表

• 5.2 middleware.run(saga, …args)

  • 动态执行 saga。用于 applyMiddleware 阶段之后执行 Sagas。这个方法返回一个
    Task 描述对象。
  • saga: Function: 一个 Generator 函数
  • args: Array: 提供给 saga 的参数 (除了 Store 的 getState 方法)

• 5.4 take(pattern)

  • 创建一条 Effect 描述信息，指示 middleware 等待 Store 上指定的 action。
  • 发起一个 action 到 store
  • 匹配规则
    -1） pattern为空 或者 * ，将会匹配所有发起的action
    -2） pattern是一个函数，action 会在 pattern(action) 返回为 true 时被匹配
    -3） pattern是一个字符串，action 会在 action.type === pattern 时被匹配
    -4 ) pattern是一个数组，每一项引用以上规则进行匹配

• 5.5 call(fn, …args)

  • 和原生call()函数差不多

• 5.6 select(selector, …args)

  • 得到 Store 中的 state 中的数据

• 5.7 race(effects)

  • effects: Object : 一个{label: effect, ...}形式的字典对象

• 5.8 cancel(task)

  • 创建一条 Effect 描述信息，指示 middleware 取消之前的 fork 任务。

• 5.9 join(task)

  • 等待fork任务返回结果(task对象)

• 5.10 fork(fn, …args)

  • 无阻塞的执行fn，执行fn时，不会暂停Generator
  • yield fork(fn ...args)的结果是一个 Task 对象