React Dva项目小优化之redux-action

-耿瑞-2023-08-12 9:12

之前我们讲过 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中

这样做一个小优化

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