大学生水果预定配送网站建设的项目规划书网站开发项目对自身的意义
之前 我们讲过 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-lineconst 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中
这样 做一个小优化
老实说 这个东西给人的感觉有一点点画蛇添足 不要也罢