这是该系列文章的第二篇了，距离上一篇过去已经有一周了，如果没有看过之前的文章，请点击下方的传送门
本系列文章传送门
打造前端大秘宝系列之REDUX状态处理框架ZORO-基本简介
今天主要的目的是介绍目前zoro中内置的插件，并且举例在实际生产项目中的使用方式
简述
目前zoro从2.0版本之后，已经将内置插件独立出基础库中，zoro plugin项目地址
目前内置的插件如下:
全局loading插件 createLoading
该模块所写的代码都是基于上一篇文章代码续写的，也就是不完整的代码，仅列出了与本模块相关的代码，要完整代码请结合上一篇文章中案例
在我们实际生产应用中，我们总需要处理异步数据加载这段时间的状态，我们总是需要在界面层一遍一遍不断重复的设置loading，取消loading，有没有办法可以实现全局统一设置取消loading，而我们只需专注于如何展现loading态即可
借用上一篇文章中的与服务端通信的todo应用案例来介绍如何使用loading插件
首先我们只需在应用的入口文件中引入loading插件
import zoro from '@opcjs/zoro'
// 通过yarn add @opcjs/zoro-plugin安装
// 更多信息查看项目github仓库地址
import { createLoading } from '@opcjs/zoro-plugin'
import todos from './models/todos'
import App from './components/App'
const app = zoro()
app.model(todos)
// 引入loading全局处理插件
// app.use 可以注册单个或多个插件，多个时为数组形式
app.use(createLoading())
// 省略部分代码
通过这一步的如果你通过redux-devtools或打印redux state状态值，你会发现，你的state层除了todos还多出了一个loading，结构如下
{
todos: [...],
loading: {
global: false,
model: {
todos: false,
},
effect: {
'todos/queryTodos': false,
},
},
}
那么我们介绍下这些值对应得意思和使用场景
loading.global 默认值为false，当应用中有任意一个model中得effects处于执行状态，该值为true，多用于后台管理系统中，全局loading样式控制
loading.model 默认值为一个空对象，其中todos对应着我们todos model， 意味着只有todos model中有任意一个effects处于执行状态，该值会被设置为true
loading.effect 默认值为一个空对象，它得属性值组成为[model namespace]/[model effect 名称]，作用同上方，只是对应得是具体得某个effect动作
接下来我们便要利用这个插件实现，在请求todos列表得这段过程中展现一个正在加载中得文案
import React from 'react'
import { connect } from 'react-redux'
import { dispatcher } from '@opcjs/zoro'
class Todos extend React.Component {
componentDidMount() {
dispachter.todos.queryTodos()
}
handleAdd() {
dispatcher.todos.add({ text: '这是一个新增的代办事件' })
}
render () {
const { todos, loading } = this.props
// 新增loading状态展示
if (loading) return <div>数据加载中。。。</div>
return (
<div>
<ul>
{todos.map(todo => (
<li key={todo}>todo</li>
))}
</ul>
<button onClick={handleAdd}>添加</button>
</div>
)
}
}
// 通过connect链接state数据到组件中
export default connect(({ todos, loading }) => ({
todos,
// 新增连接loading状态到组件
loading： loading.effect['todos/queryTodos'],
}))(Todos)
可以看出引入了loading插件之后，对于loading处理变得异常得简单，最后有人可能会问了，如果我得model中本来就有一个命名为loading的呢，这样岂不是冲突了，当然是有解决办法的，你可以修改你以前那个model的名字呀（手动滑稽。。。哈哈哈），
其实还有更好的办法，createLoading插件支持参数传递，命名属于你自己的名称
app.use(createLoading({ namespace: 'myLoading' }))
Model扩展插件 createExtendModel
在代码的世界里，无论是何种模式，写的时间长了，代码量上去了，总会出现许多可以直接复制粘贴的代码，我们往往相同的代码写上3次就希望能提取到公共位置，只需简单几步，便可再次复用。
extendModel更像是jquery的extends，或者是mixin等特性
首先我们来看如下两个model的定义
// 新闻列表的model定义
export default {
namespace: 'news',
state: {
data: [],
pagination: {
current: 0,
pageSize: 10,
total: 0,
},
},
reducers: {
update(action, state) {
const oldData = state.data
return { ...state, data: oldData.concat(action.payload) }
},
updatePage(action, state) {
return {
...state,
pagination: {
...state.pagination,
...payload,
},
},
},
},
effects: {
async queryNews(action, { put, select }) {
const { data, pagination} = await getPageNewsFromServer(action.payload)
put({ type: 'updatePage', payload: pagination })
put({ type: 'update', payload: data })
},
},
}
// 产品列表的model定义
export default {
namespace: 'products',
state: {
data: [],
pagination: {
current: 0,
pageSize: 10,
total: 0,
},
},
reducers: {
update(action, state) {
const oldData = state.data
return { ...state, data: oldData.concat(action.payload) }
},
updatePage(action, state) {
return {
...state,
pagination: {
...state.pagination,
...payload,
},
},
},
},
effects: {
async queryNews(action, { put, select }) {
const { data, pagination} = await getPageProductsFromServer(action.payload)
put({ type: 'updatePage', payload: pagination })
put({ type: 'update', payload: data })
},
},
}
通过对比你会发现，这两个model基本一致逻辑，我们写了很多的重复代码，如果后面又有多个相同的类型model怎么办，简单粗暴的方法就是直接拷贝过来，改一改就完事了，但是如果我们需要在pagination中新增某个字段，或者需要在updatePage对于后台返回的字符串形式的数值进行格式化，那我们将会面临很大的困扰，需要一个一个文件去改写
如果是我，我会通过extendModel如何实现逻辑共用
首先创建处理分页的共用逻辑的extendModel
export default {
state: {
current: 0,
pageSize: 10,
total: 0,
},
reducers: {
updatePage(action, state) {
return {
...state,
pagination: {
...state.pagination,
...payload,
},
},
},
// 配置仅以下model中生效
// 具体配置方法请查看仓库api文档
includeModel：['news', 'products'],
}
引入paginationExtendModel到应用中
import { createExtendModel } from '@opcjs/zoro-plugin'
import paginationExtendModel from '../models/pagination'
app.use(createExtendModel(paginationExtendModel))
// 省略其他代码
接下来我们可以简化news和products model的配置
// 简化后news model
export default {
namespace: 'news',
state: {
data: [],
},
reducers: {
update(action, state) {
const oldData = state.data
return { ...state, data: oldData.concat(action.payload) }
},
},
effects: {
async queryNews(action, { put, select }) {
const { data, pagination} = await getPageNewsFromServer(action.payload)
put({ type: 'updatePage', payload: pagination })
put({ type: 'update', payload: data })
},
},
}
// 简化后products model
export default {
namespace: 'products',
state: {
data: [],
},
reducers: {
update(action, state) {
const oldData = state.data
return { ...state, data: oldData.concat(action.payload) }
},
},
effects: {
async queryNews(action, { put, select }) {
const { data, pagination} = await getPageProductsFromServer(action.payload)
put({ type: 'updatePage', payload: pagination })
put({ type: 'update', payload: data })
},
},
}
利用了extend model我们减少了代码的重复编写和维护工作，只细观察这两个model会发现，其中update也是一个重复性的工作，可以得到简化，那就让我们来编写一个可以复用到所有model的公共update吧
首先我们规定，所有model的state存储结构必须是一个对象
export default {
state: {
// 省略定义
},
}
那我们就可以开始编写我们的update extend model
export default {
state: {},
reducers: {
update(action, state) {
return { ...state, action.payload }
},
},
// 为什么这里没有定义includeModels呢，因为希望该模块应用于所有的model
}
引入到应用中
import { createExtendModel } from '@opcjs/zoro-plugin'
import updateExtendModel from '../models/update'
import paginationExtendModel from '../models/pagination'
app.use([
createExtendModel(paginationExtendModel),
createExtendModel(updateExtendModel),
])
修改最终的news和products model定义
// 最终版news model
export default {
namespace: 'news',
state: {
data: [],
},
effects: {
async queryNews(action, { put, select }) {
const { data, pagination} = await getPageNewsFromServer(action.payload)
// 提取更新组装逻辑到各自的model中
// 这样处理更加具备灵活性
const oldData = select().data
put({ type: 'updatePage', payload: pagination })
put({ type: 'update', payload: { data: oldData.concat(data) })
},
},
}
// 最终版products model
export default {
namespace: 'products',
state: {
data: [],
},
effects: {
async queryNews(action, { put, select }) {
const { data, pagination} = await getPageProductsFromServer(action.payload)
// 提取更新组装逻辑到各自的model中
// 这样处理更加具备灵活性
const oldData = select().data
put({ type: 'updatePage', payload: pagination })
put({ type: 'update', payload: { data: oldData.concat(data) })
},
},
}
结语
今天的介绍就到这里了，想必你已经对插件使用有了大体了解，更多详细的信息请移步对应的仓库地址，后续有时间了，我会继续介绍该系列如下内容：
- 打造前端大秘宝系列之REDUX状态处理框架ZORO-插件编写
对我的文章有兴趣的还请多多关注我，谢谢
最后还是那句话，开源不易，如果好用，请给个star，谢谢
网友评论