React中使用redux-saga
一、redux-saga简介
redux-saga是管理redux异步操作的中间件,redux-saga通过创建sagas将所有异步操作逻辑
收集在一个地方集中处理。由于使用了generator函数,redux-saga让你可以用 同步的方式来写异步代码。
二、redux-saga安装
npm install redux-saga -s
三、redux-saga配置
import { takeEvery, put, all } from 'redux-saga/effects'
// put 它是saga提供给我们,用于发送指令给reducer来完成同步操作
// takeEvery 监听每一次dispatch发送的指令
// all方法,可以监听多个监听saga,它的功能和Promise.all方法一样
// 自动导入模块化的子saga文件
// require.context('目标目录',是否向目标目录的子目录查找,文件后缀)
const moduleFn = require.context('../views', true, /saga\.js/i)
const modules = moduleFn.keys().reduce((prev, curr) => {
let itor = moduleFn(curr).default
prev.push(itor())
return prev
}, [])
// saga中间件 主saga,用于区别是否需要saga来处理异步操作,如果没有异步,则放行
function* mainSaga() {
yield all(modules)
}
export default mainSaga//引用此文件 可以解构方式使用它 import {mainSaga} from "xxx"
四、redux-saga使用
1.定义子saga
import { takeEvery, put, call } from 'redux-saga/effects'
import { getMenuListApi } from '@/api/userApi'
import { setMenuAction } from '@/actions/userAction'
export default function* watchSaga() {
yield takeEvery('async_setMenu', setMenu)//使用这个saga需要通过 async_setMenu命令
}
// 账号登录
function* setMenu() {
let ret = yield call(getMenuListApi)// call 发送请求
yield put(setMenuAction(ret))// put 将执行完的结果送给redux
}
2.在视图中调用
import React, { useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
import { asyncSetMenuAction } from "@/actions/userAction";//此目录中封装了命令名称
const Admin = ({ history: { push }, location: { pathname } }) => {
const dispatch = useDispatch();
useEffect(() => {
dispatch(asyncSetMenuAction());//asyncSetMenuAction中有 async_setMenu 命令类型
}, []);
return (
<>
saga使用
</>
);
};
export default Admin;