redux-saga中间件

最新推荐文章于 2025-05-19 06:41:14 发布

划水运动员9527

最新推荐文章于 2025-05-19 06:41:14 发布

阅读量223

点赞数

分类专栏： redux-saga react 文章标签： javascript reactjs

本文链接：https://blog.youkuaiyun.com/qq_37449852/article/details/126127468

版权

react 同时被 2 个专栏收录

7 篇文章

订阅专栏

redux-saga

1 篇文章

订阅专栏

本文详细介绍了如何在React应用中利用Redux Saga实现异步操作的管理，包括新建saga文件、监听action、注入saga到Redux store，并以create-react-app为例进行了演示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

懒得废话了，既然您找到这里，肯定知道要用 redux-saga 做什么事情了。
1、新建saga的文件夹，例如 saga/home_saga.js

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

function* getHomeListFn(){
    yield put({type: 'xxxxx'})
    // 进行到这里是已经对页面触发的 dispatch 为 getHomeList_type做了拦截到了这里
    // 然后这里进行接口请求 对数据做处理后 再出发一次action
}

function* getHomeList() {
    yield takeEvery('getHomeList_type', getHomeListFn()) // 监听type类型以及触发事件
}

function* homeSaga_model() {
    yield all([getHomeList()]) // 数组类型， 可以同时监听多个saga事件
}

export default homeSaga_model;

2、如何将 saga 文件进行注入

以 create-react-app 为例，index.js 文件之前使用了redux，大概是这种

import { createStore } from 'redux';
import { Provider } from 'react-redux';
import allStore from 'xxxx/xxx/index'; // reducer模块化，统一导出
...
let store = createStore(allStore);
...
<Provider store={store}> // 数据可以注入到页面中， 页面中使用connect就可以连接了
    xxxx
</Provider>

之后我们以这个为基础再注入 saga

import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import createSagaMiddleware from 'redux-saga';
import homeSagas from 'xxxx/xxxx/homeSaga.js';
import allStore from 'xxxx/xxx/index'; // reducer模块化，统一导出

...
let sagaMiddle = createSagaMiddleware();
let store = createStore(allStore, applyMiddleware(sagaMiddle));
// 通过 applyMiddleware 将saga注入到redux中，就可以进行监听，进行一个劫持
sagaMiddle.run(homeSagas)// 上一段已经注入saga了，这句话是运行写的单个saga文件，
...
<Provider store={store}> // 数据可以注入到页面中， 页面中使用connect就可以连接了
    xxxx
</Provider>

一会我把代码看看上传到git，地址链接