打造前端大秘宝系列之REDUX状态处理框架ZORO-插件介绍

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

这是该系列文章的第二篇了,距离上一篇过去已经有一周了,如果没有看过之前的文章,请点击下方的传送门

本系列文章传送门

打造前端大秘宝系列之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,谢谢