React39redux-saga介绍以及示例

  • redux-saga是一个用于管理redux应用异步操作的中间件,redux-saga通过创建sagas将所有异步操作逻辑收集在一个地方集中处理,可以用来替代redux-thunk中间件
  • 工作成员分工:
    • reducer负责处理action的stage更新
    • sagas负责协调那些复杂或者异步的操作
  • redux-sagas可以处理各种复杂的异步操作,redux-thunk适用于简单的异步操作场景
  • redux-saga使用generator解决异步问题,使用同步方式编写异步代码,解决地狱回调问题
  • redux-thunk可以接受function类型的action,而redux-sagas则是纯对象action的解决方案
  • 安装redux-sagas:npm install redux-sagas -S

  示例:

  • 首先我们编写一个管理登录的reducer和action的文件user.redux.js
  • user.redux.js(安装了之前的插件之后进入文件按rxr然后回车可以快速创建模板)
  • 编写sagas.js供我们捕获action创建函数返回的action
  • 创建应用中间件,把数据源暴露出去
  • 最后回到路由组件RouteSample.js里面进行修改
    • 引入react-redux的connect和Provider和其他需要用到的数据及包
    • 把原来的组件内虚拟的state和auth状态及登录方法替换成redux内的
注:生成action的函数非常重要,我们调用异步操作的起点就是去调用这个函数就会生成一个action就会触发sagas里面监听的对应的type进而触发对应的异步事件。

猜你喜欢

转载自www.cnblogs.com/tengfeiS/p/12217306.html