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中

这样 做一个小优化

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

相关推荐
前端君7 小时前
实现最大异步并发执行队列
javascript
知识分享小能手8 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队9 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
萌萌哒草头将军9 小时前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite
Qlittleboy10 小时前
uniapp如何使用本身的字体图标
javascript·vue.js·uni-app
林_深时见鹿10 小时前
Vue + ElementPlus 自定义指令控制输入框只可以输入数字
前端·javascript·vue.js
GDAL10 小时前
Knockout.js 任务调度模块详解
javascript·knockout
椒盐螺丝钉10 小时前
Vue组件化开发介绍
前端·javascript·vue.js
koooo~10 小时前
v-model与-sync的演变和融合
前端·javascript·vue.js
GW_Cheng10 小时前
分享一个vue2的tinymce配置
开发语言·javascript·ecmascript