打造前端大秘宝系列之REDUX状态处理框架ZORO-基本简介

120 阅读7分钟
原文链接: www.jianshu.com

本人是一个dva框架的长期使用者,个人非常喜欢dva对于redux的封装,但是在使用dva的过程中遇到了许多不是很顺手的问题,也因此产生了自己动手编写一套类dva库,并致力于解决dva使用过程中的所表现出来的不足,稍后我会介绍在使用过程中遇到的问题,并阐述zoro中如何解决该问题。

本文章适合有一定redux基础或者使用过dva的读者

简述

  • 极简的api,可快速上手
  • 简化redux的应用难度
  • 快速接入微信原生小程序,wepy小程序框架,taro小程序框架中,原则上能使用redux的地方皆可以接入
  • 内置插件,支持自定义编写插件
  • 全局错误处理方案

以下列出相关资料链接:

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版本已经应用与实际小程序项目中

更多详细的信息请移步对应的仓库地址,后续有时间了,我会继续介绍该系列如下内容:

对我的文章有兴趣的还请多多关注我,谢谢

最后还是那句话,开源不易,如果好用,请给个star,谢谢