React Dva项目小优化之redux-action

之前 我们讲过 models
接下啦 我们来给大家讲一个新的库
这个库的话 有最好 没有影响也不大
它主要是帮助我们处理 action的
我们直接在 GitHub 官网上搜索 redux-action

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

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

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

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

npm install --save redux-actions

它本身的API很少 只有三个

这里 我们也不一一介绍了
然后 我们在 src文件夹下创建一个文件夹 叫 actions 里面创建一个文件 叫 index.js

然后 我这里 根目录下 models 下有一个AsynchSchedul.js
代码是这样的

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函数
应该这样

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

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

import {
    
     createAction } from "redux-actions";

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

就是定义一个变量名 接收这里面用createAction包一层地址 然后调用导出
之后 我们在要使用的地方这样写

引入是肯定要引入的
然后通过this.props.dispatch 里面直接放你包裹的函数去调用 如果有参数直接传给你包装的函数
例如 我这里的对象参数 直接就放在了getAsynchSchedulListApi中

这样 做一个小优化

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