React中使用redux-saga

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;