export default function createSagaMiddleware<C extends object>(options?: SagaMiddlewareOptions<C>): SagaMiddleware<C>
export interface SagaMiddlewareOptions<C extends object = {}> {
/**
* Initial value of the saga's context.
*/
context?: C
/**
* If a Saga Monitor is provided, the middleware will deliver monitoring
* events to the monitor.
*/
sagaMonitor?: SagaMonitor
/**
* If provided, the middleware will call it with uncaught errors from Sagas.
* useful for sending uncaught exceptions to error tracking services.
*/
onError?(error: Error, errorInfo: ErrorInfo): void
/**
* Allows you to intercept any effect, resolve it on your own and pass to the
* next middleware.
*/
effectMiddlewares?: EffectMiddleware[]
}
导入
import createSagaMiddleware from "redux-saga";
构建store
const store = createStore(sagaReducer, {}, applyMiddleware(sagaMiddleware));
一、Redux
1. readux的概述
通用的状态管理辅助
工具
,习惯上我们可以结合ReactJs
来使用,在组件化开发过程中,组件的数据状态
不得不集中化管理,这也是我们使用Redux
的原因之一,是一个数据的容器。习惯上我们称之为js库
2 . 三大原则
3 . 组成部分
Action
action
顾名思义动作
,行动
行为
,一言以蔽之,它是把数据从应用传到仓库
的一个动作,也就是这个数据仓库JS对象
格式
type
字段表示执行的动作;字符串常量在实际的开发中我们习惯上是action创建函数
Reducer
现在我们依旧不说
store
这个概念,现在动作
有了,但是action
它只是描述了一下这个动作,但并不知道咋更新数据,提到数据,我们假使这个简单的
js对象
就是数据ACTION是个普通的对象;REDUCER是个普通的函数
说普通也不普通,js的函数而已
但是没那么简单
干净简单,
怎么可能啥也不干呢
注意
state
Store
获取状态
更新状态
也就是我们说的派发一个动作
注册监听(订阅)
4 . 简单案例
在这个时候,有个问题,前边说的这一切,那我们该怎么来创建这个仓库呢
这个库里就有方法,也就是我们常说的
redux
构建action
构建reducer
创建store
引入文件
createStore
派发action
监听
订阅状态的变更
小结
通过一个简单的案例,我们知道一个简易的流程:
action
返回一个对象必须有type属性reducer
响应action t通过return 把数据传回storeredux
这个库来创建一个store 传递写好的reducer
$store.subscribe()
注册监听store.getState()
取值二 、React-Redux
那在如上我们使用的
redux
这个库看起来是没有问题,但是这一波流的操作在每个组件都要走一遍,显然是十分繁琐和重复的,这就需要看谁能不能帮帮我,这就是
react-redux
如果需要把redux
整合到react
中来使用就需要react-redux
1. 什么是
react-redux
redux 官方出品
能够更好的结合
react
来管理数据Provider 组件
state
store
作为props
通过context
传递connect 方法
store
中的state
connect
加强mapStateToProps(state,ownProps)
mapDispathToProps(dispath,ownProps)
2. 使用
安装相关的依赖
构建store 和readucer
Provider组件实现
combineReducers
创建组件
ComA A组件
ComB
infoReducer.js
listReducer
三、Redux-Saga
不管怎么说,如上提及数据流操作只支持同步的操作,实现异步的话就需要
中间件
1. 中间件
2 . 概述
异步操作
,让副作用的执行更加简单3. createSagaMiddleware
其中源码是这样的
导入
构建store
执行
4. 案例
saga 的辅助函数
takeEvery
takeLatest
throttle
SagaCom
effect 创建器
详细的api 用法可以参考官方文档
业务流程
获取数据
action
reducer
匹配对应的action 如果是一部的action 直接把数据返回takeEvery
来进行监听生命周期
四、Redux-Thunk
五、redux 原理
六、思考
takeEvery
takeLatest
throttle
在底层有什么区别?