React Dva项目小优化之redux-action

之前 我们讲过 models

接下啦 我们来给大家讲一个新的库

这个库的话 有最好 没有影响也不大

它主要是帮助我们处理 action的

我们直接在 GitHub 官网上搜索 redux-action

我们搜出来 第一个就是 从星数来看 还是非常优秀的

我们拉下来 找到这个Documentation 然后点击进去

进入之后 拉下来 找到下面这个API 点击进去

第一件事 我们肯定是去安装这个依赖

终端执行

javascript 复制代码
npm install --save redux-actions

它本身的API很少 只有三个

这里 我们也不一一介绍了

然后 我们在 src文件夹下创建一个文件夹 叫 actions 里面创建一个文件 叫 index.js

然后 我这里 根目录下 models 下有一个AsynchSchedul.js

代码是这样的

javascript 复制代码
import * as api from "../services/example";

export default {

    namespace: 'AsynchSchedul',
  
    state: {},

    effects: {
        *getAsynchSchedulList({ payload }, { call, put }) {  // eslint-disable-line
            const dataList = yield call(api.getFilmData,payload);
            yield put({
                type: 'save',
                payload: dataList.data
            });
            return dataList.data
        },
    },
    subscriptions: {
        setup({ dispatch, history }) {
            history.listen((location) =>{
                console.log(location);
            })
        },
        
    },
}

那么 正常情况

我们想在组件中使用这个getAsynchSchedulList函数

应该这样

javascript 复制代码
this.props.dispatch({
   type: "AsynchSchedul/getAsynchSchedulList",
  payload: {
    id: 123
  }
}).then(res => {
  console.log(res);
})

但看着不是那么方便 我们可以将actions下的index.js改成这样

javascript 复制代码
import { createAction } from "redux-actions";

export const getAsynchSchedulListApi = createAction("AsynchSchedul/getAsynchSchedulList");

就是定义一个变量名 接收这里面用createAction包一层地址 然后调用导出

之后 我们在要使用的地方这样写

引入是肯定要引入的

然后通过this.props.dispatch 里面直接放你包裹的函数去调用 如果有参数直接传给你包装的函数

例如 我这里的对象参数 直接就放在了getAsynchSchedulListApi中

这样 做一个小优化

老实说 这个东西给人的感觉有一点点画蛇添足 不要也罢

相关推荐
脑袋大大的3 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
速易达网络5 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
耶啵奶膘5 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
JoJo_Way5 小时前
LeetCode三数之和-js题解
javascript·算法·leetcode
视频砖家5 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
小白变怪兽7 小时前
一、react18+项目初始化(vite)
前端·react.js
GISer_Jing8 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆8 小时前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试
我在北京coding9 小时前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js