thunk、redux-saga（中间件）、redux-saga流程图，Api

散星寥落
446 阅读3分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第11天，点击查看活动详情

1.png

thunk

redux-thunk中间可以让action创建函数先不返回一个action对象，而是返回一个函数，函数传递两个参数（dispatch，
getState），在函数体内进行业务逻辑的封装

redux-saga

redux-saga是一个用于管理Redux应用异步操作（Side Effexts）的中间件（又称异步action）。redux-saga通过创建
Sagas将所有异步操作逻辑收集在一个地方集中处理，可以用来代替redux-thunk中间件
redux-saga常用在两个地方：
    reducer负责处理action的阶段更新
    sagas负责协调那些复杂或者异步的操作

redux-saga流程图

2.png

redux-sagas介绍

    Sagas不同于thunks，thunks是action被创建时调用，而Sagas只会在应用启动时调用（但初始启动的Sagas可能会后台
调用其他Sagas），Sagas可以被看作是后台运行的进程，Sagas监听发起的action，然后决定基于这个action来做什么：
是发起一个异步调用（比如一个fetch请求），还是发起其他和action到Store，甚至是调用其他的Sagas

    sagas所有的任务都是通用yield Effects来完成（Effect 可以看作是redux-saga的任务单元）。Effects都是简单的
javascript对象，包含了要被Saga middleware执行信息，redux-saga为各项任务提供了各种Effect创建器，比如调用一个
异步函数，发起一个action到Store，启动一个后台任务，或者等待一个满足某些条件的未来的action

redux中间件

常用名词
    一个effect就是- -个Plain Object JavaScript对象，包含- -些将被saga middleware执行的指令。
    阻塞调用的意思是，Saga在yieldEffect之后会等待其执行结果返回，结果返回后才会恢复执行Generator中的下一个指令。
    非阻塞调用的意思是，Saga会在yield Effect之后立即恢复执行。

redux-saga常用api

    call:call(fn, ...args)
    用来调用异步函数，将异步函数和函数参数作为call函数的参数传入，返回一个js对象。saga引入他的主要作用是
方便测试，同时也能让我们的代码更加规范化。
    fn: fn: Function-一个Generator函数,或者返回Promise的普通函数
    args: Array<any> -一个数组，作为fn的参数
    注: call操作是阻塞的，只有等promise回来后才能继续执行

put(action)：作用和redux中的dispatch相同
    创建一个Effect描述信息，用来命令middleware向Store发起一个action
select：select（selector，...args）：作用和redux thunk中的getState相同
    slector：Function一个(state,...args)=>args的函数，他接受当前state和一些可选参数，并返回当前
Store State上的一部分数据
    args:Array<any>：传递给选择器的可选参数，将追加在getState后

take(pattern)：创建一个Effect描述信息，用来命令middle Ware在Store上等待指定的action。在发起与pattern匹配
的action之前，Generator将暂停。

pattern不同情况，内容不一样：
    如果以空参数或'*'调用take，name将匹配所有发起的action(例如，take()将匹配所有action)
    如果他是一个函数，那么将匹配pattern(action)为true的action。(例如，take(action=>action.entities)
将匹配那些entities字段为真的action)
    如果他是一个字符串，那么将匹配action.type===pattern的action。（例如,take(INCREMENT_ASYNC)）
    如果他是一个数组，那么数组中的每一项都适用于上述规则——因此它是支持字符串与函数混用的。不过，最常见的
用例还属纯字符串数组，其结果是用action.type与数组中的每一项相比对。(例如，take[INCREMENT,DECREMENT])将
匹配INCREMENT或decrement类型的action
avatar
文章
阅读
粉丝