本人是一个dva框架的长期使用者，个人非常喜欢dva对于redux的封装，但是在使用dva的过程中遇到了许多不是很顺手的问题，也因此产生了自己动手编写一套类dva库，并致力于解决dva使用过程中的所表现出来的不足，稍后我会介绍在使用过程中遇到的问题，并阐述zoro中如何解决该问题。
本文章适合有一定redux基础或者使用过dva的读者
简述
- 极简的api，可快速上手
- 简化redux的应用难度
- 快速接入微信原生小程序，wepy小程序框架，taro小程序框架中，原则上能使用redux的地方皆可以接入
- 内置插件，支持自定义编写插件
- 全局错误处理方案
以下列出相关资料链接：
- zoro github仓库地址
- zoro-plugin 相关插件github仓库地址
- redux redux仓库地址
- dva dva库链接
zoro名字的由来
zoro全名roronoa zoro(罗罗诺亚·索隆)，是动漫onepiece中的一个剑客，即使没有恶魔果实的能力，确不断的朝着世界第一大剑豪的目标前进，最终也证明了他在不断的成长
为什么编写zoro库
我主要列举一下本人在使用dva过程中遇到过的不足，纯属个人观点，如有错误，还望指出
dva在外部调用model时dispatch需要给上type类型，不够直观
首先我们来看一下dva给出的列子:
import React from 'react'
import { connect } from 'dva'
import ProductList from '../components/ProductList'
const Products = ({ dispatch, products }) => {
function handleDelete(id) {
// dva中调用model action or effect的办法
dispatch({
type: 'products/delete', // 需指定model namespace
payload: id,
})
}
return (
<div>
<h2>List of Products</h2>
<ProductList onDelete={handleDelete} products={products} />
</div>
)
}
export default connect(({ products }) => ({
products,
}))(Products)
而我希望在zoro中实现的使用方式如下：
import React from 'react'
import { connect } from 'react-redux'
import { dispatcher } from '@opcjs/zoro'
import ProductList from '../components/ProductList'
const Products = ({ dispatch, products }) => {
function handleDelete(id) {
// 区别主要看这里
dispatcher.products.delete(id)
}
return (
<div>
<h2>List of Products</h2>
<ProductList onDelete={handleDelete} products={products} />
</div>
);
};
export default connect(({ products }) => ({
products,
}))(Products);
dva引入了saga库作为基础，增加了入门门槛，（虽然也没有多少难度）
dva中model定义方式
export default {
namespace: 'products',
state: [],
effects: {
*delete({ payload: { id } }, { call, put }) {
yield call(deleteProductFromServer, { id })
yield put({ type: 'delete', payload: { id } })
},
}
reducers: {
delete(state, { payload: id }) {
return state.filter(item => item.id !== id)
},
},
};
zoro中引入es7语法中的async, await代替saga
export default {
namespace: 'product',
state: [],
effects: {
async delete({ payload: { id } }, { put }) {
await deleteProductFromServer({ id })
put({ type: 'delete', payload: { id } })
},
},
reducers: {
delete({ payload: id }, state) {
return state.filter(item => item.id !== id)
},
},
}
dva中的put中的同步执行在dva1中无法实现，在dva2中作者提供了相应解决办法，但依旧麻烦
这里是dva2中的实现方式，通过take等待上一个put执行完毕，再继续执行，
yield put({ type: 'addDelay', payload: { amount: 2 } })
yield take('addDelay/@@end')
const count = yield select(state => state.count)
yield put({ type: 'addDelay', payload: { amount: count, delay: 0 } })
zoro中采用async，await，天生所有的effect方法都是一个promise对象，因此也支持put的同步执行
await put({ type: 'addDelay', payload: { amount: 2 } })
const count = select().count
await put({ type: 'addDelay', payload: { amount: count, delay: 0 } })
如何在react应用中快速接入zoro
如果你是一个dva使用者，或者你是个前端大牛，下面的介绍可以忽略，直接去仓库查看api文档，那里有更全面的api介绍
接入代码如下
import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import zoro from '@opcjs/zoro'
import testModel from './models/test'
import App from './components/App'
const app = zoro()
app.model(testModel) // 注册单个model
// app.model([model1, model2]) // 注册多个model
const store = app.start() // 启动并创建store
render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
)
从代码中可以很直观的发现，接入zoro到react应用只需简单的4个步骤即可
import zoro from '@opcjs/zoro'
const app = zoro()
引入zoro库，并创建app
import testModel from './models/test'
app.model(testModel)
为app引入model，这里先忽略model改如何定义，后续会着重介绍
const store = app.start()
生成redux store对象用于注入到界面层中
render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
)
将生成的store，通过react-redux Provider 注入到界面组件中
何为model，以及我们该如何定义我们的model
model是用于存储界面数据的，同时也用于管理数据，包括增删改查，异步获取数据等，下面我将会以todos应用来阐述如何定义我们的model
最简单的model应用
首先我们需要实现的功能如下，显示todo列表，删除
明白了需求，首先我们定义todos的model
export default {
namespace: 'todos', // 给model取一个名称，必须是唯一的不变的
state: [], // model初始值，可以是任意类型
reducers: {
add({ payload: { text } }, state) {
return state.concat([text])
},
},
}
注册我们的model到app中
import todos from '../models/todos'
app.model(todos)
...省略其他步骤，详见上一节
接下来我们需要完善我们Todos组件
import React from 'react'
import { connect } from 'react-redux'
// 引入dispatcher
import { dispatcher } from '@opcjs/zoro'
const Todos = ({ todos }) => {
// 触发一个todos的添加事件
const handleAdd = () => dispatcher.todos.add({ text: '这是一个新增的代办事件' })
return (
<div>
<ul>
{todos.map(todo => (
<li key={todo}>todo</li>
))}
</ul>
<button onClick={handleAdd}>添加</button>
</div>
)
}
// 通过connect链接state数据到组件中
export default connect(({ todos }) => ({
todos,
}))(Todos)
只需最后一步我们便完成了这个需求，链接Todos组件到App组件中
import React from 'react'
import Todos from '../components/Todos'
const App = () => <Todos />
export default App
到这里一个最简单的todos需求便完成了，我们对model的基本定义也有了大体了解，假如我们需要在应用初始时获取服务器上的todo列表展示呢，该如何完成呢
如何通过model与服务器实现交互
首先我们为model新增获取todos的服务
export default {
namespace: 'todos', // 给model取一个名称，必须是唯一的不变的
state: [], // model初始值，可以是任意类型
reducers: {
add({ payload: { text } }, state) {
return state.concat([text])
},
// 新增update reducers
update({ payload }) {
return payload
},
},
effects: {
// 新增queryTodos从服务器中获取列表数据
async queryTodos({ payload }, { put, select }) {
// 省略getTodosFromServer，这是一个ajax请求，如axios， fetch等
//与服务器通信，返回列表，该函数必须返回Promise对象
const { todos } = await getTodosFromServer(payload)
// 通过select获取当前的todos列表，select用法详见api文档
const currentTodos = select()
// put功能很多，可以发起本model的reducer，effect
// 也可以发起外部model, 但需指定namespace
// 如put({ type: 'test/update' }) 发起test model中的某个方法
// 如果put发起的是一个异步的effect，必要时可以通过await等待结果
// 更多用法详见api文档
put({ type: 'update', payload: currentTodos.concat(todos) })
},
},
}
定义好了model，接下来我们我们只需在组件挂载时调用该方法即可
import React from 'react'
import { connect } from 'react-redux'
// 引入dispatcher
import { dispatcher } from '@opcjs/zoro'
class Todos extend React.Component {
componentDidMount() {
// 初始化挂载时调用获取异步数据
dispachter.todos.queryTodos()
}
handleAdd() {
dispatcher.todos.add({ text: '这是一个新增的代办事件' })
}
render () {
return (
<div>
<ul>
{this.props.todos.map(todo => (
<li key={todo}>todo</li>
))}
</ul>
<button onClick={handleAdd}>添加</button>
</div>
)
}
}
// 通过connect链接state数据到组件中
export default connect(({ todos }) => ({
todos,
}))(Todos)
结语
到这里一个简单的zoro接入教程就结束了，其中还有很多好玩有用的特性没能介绍，比如插件机制，全局错误捕获等，这是我第一个写教程，不知调理是否清晰易懂，望各位看官轻喷，有问题请指正，让我们共同进步，不断的造出更多更简易的轮子
目前zoro v2版本已经应用与实际小程序项目中
更多详细的信息请移步对应的仓库地址，后续有时间了，我会继续介绍该系列如下内容：
- 打造前端大秘宝系列之REDUX状态处理框架ZORO-插件介绍
- 打造前端大秘宝系列之REDUX状态处理框架ZORO-插件编写
对我的文章有兴趣的还请多多关注我，谢谢
最后还是那句话，开源不易，如果好用，请给个star，谢谢
