redux-saga中间件的使用

最新推荐文章于 2025-06-18 20:34:03 发布

原创最新推荐文章于 2025-06-18 20:34:03 发布 · 752 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#redux-saga

前端同时被 3 个专栏收录

28 篇文章

订阅专栏

react

25 篇文章

订阅专栏

redux-saga

1 篇文章

订阅专栏

本文详细介绍了如何使用 Redux-Saga 中间件处理异步操作。从安装配置到具体实现，包括创建 saga 文件、在 store 中引入和运行 saga、组件中创建 action，以及在 saga 中捕获和处理 action 的全过程。

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

中间件是值action和store的中间

1、首先安装redux-saga

npm install --save redux-saga

2、在store文件夹下创建saga.js文件
3、在store下的index文件中引入

import createSagaMiddleware from 'redux-saga';
import mySaga from './sagas'
const sagaMiddleware = createSagaMiddleware()
const store = createStore(
reducer,
applyMiddleware(sagaMiddleware)
);//创建公共仓库
sagaMiddleware.run(mySaga)
export default store;

3、组件中创建action

componentDidMount(){
    const action=getInitList()
    store.dispatch(action)//这个的执行不仅reducer能接收到action，saga也能接收到
}

4、由于saga.js文件可以收到action
首先要对generrator函数熟悉
所以saga中的代码如下

import {  put, takeEvery } from 'redux-saga/effects'
import {GET_INIT_LIST} from './actiontypes'
import axios from 'axios'
import {initList} from './actionCreators'

function* getList() {
    try{
    const res=yield axios.get('/api/todolist');
    const action=initList(res.data);
    yield put(action);
}catch (e) {
    console.log("网络请求失败")
}
}
function* mySaga() {
    yield takeEvery(GET_INIT_LIST, getList);//通过这个捕获到action
}

export default mySaga;

这样就实现了redux-saga中间件的使用