taro中集成redux-saga

最新推荐文章于 2020-03-29 09:08:10 发布

Z_hao_nan

最新推荐文章于 2020-03-29 09:08:10 发布

阅读量700

点赞数

文章标签： taro redux-saga

本文链接：https://blog.csdn.net/Z_hao_nan/article/details/99617741

版权

本文档介绍了如何在Taro项目中集成redux-saga以处理异步问题。提供了两种引入方式：直接使用预配置的种子项目和在现有项目中手动引入。详细步骤包括安装redux-saga，调整目录结构，配置根saga文件，将sagaMiddleware添加到store，以及测试集成后的功能。

摘要由CSDN通过智能技术生成

taro中redux处理方案是采用redux-thunk,这里采用redux-saga解决异步问题，引入目前最新redux-saga@1.0.5

引入方式一

可以直接下载种子项目，已经引入了saga，并做好了相关配置，可在此基础上再次开发
taro-redux-saga-seed

// 下载种子项目
git clone https://github.com/Z-HNAN/taro-redux-saga-seed

// 安装依赖
cd taro-redux-saga-seed
npm i 

// 启动项目-小程序(微信开发者工具查看效果，有一个3s延迟的add示例)
npm run dev:weapp

引入方式二

在自己已经有的项目上引入，按照后续步骤自行引入即可

安装redux-saga

npm i redux-saga

更改目录形式

将每个文件放在模块中，利于查找，便于引入，后面引入saga文件也比较清晰，当然这里只是一个个人喜好，也可按照自己的目录形式来安排，这里只做一个参考,请多留意引入文件路径是否正确。

└─src                     
    │  app.jsx            
    │  app.less           
    │  index.html         
    │                     
    ├─pages               
    │  └─index            
    │          action.js  
    │          index.jsx  
    │          index.less 
    │          reducer.js 
    |          saga.js
    │                     
    └─store               
            index.js      
            reducer.js
            saga.js

引入index模块的saga

pages/index/saga.js捕获当前模块中的action

import {
    put, delay, takeEvery} from 'redux-saga/effects'

function* asyncAddRequest (action) {
   
  const {
    timeout } = action.payload
  yield delay(timeout)
  yield put({
    type: 'ADD' })
}

export default function* () {
   
  yield takeEvery('ASYNC_ADD', asyncAddRequest)
}