阅读 233

dream-redux 集成库:消除 Redux 开发门槛的利器

前言

自 Redux 诞生起,一直都是 React 最热门的状态管理库之一。条理清晰的工作原理和简明易懂的源码逻辑,让它拥有非常不错的的稳定性和扩展性。直到现在,也只有同样十分优秀的 Mobx 能与其较量。

Redux 的缺陷

第一,Redux 的架构代码多且分散,对中小型项目来说,架构代码甚至能占到 Redux 代码的一半。在不熟悉用法的新人眼里,这些无关业务的代码十分影响开发逻辑,被人戏称为“十分钟从入门到劝退”。

第二,更新状态时,dispatch(action) -> reducer 的流程,让代码书写变得繁琐。而且,为了遵循“不可变状态”,每次更新状态时,都需要构造返回一个全新的对象。这个过程既繁琐,又容易在修改过程中发生错误。

第三,早期的 react-redux 库是通过全局刷新来重新渲染页面,性能全靠 React 的 diff 算法硬撑。好在后来推出了 Hook API,对 connect API 也进行了优化,让状态更新精准到了组件级别。这在 React16 上已经(基本)不需要考虑性能的问题了。

dream-redux 解决的问题

dream-redux 的出现,正是为了解决上面提到的前两个缺点:“搭建难”和“更新难”。

npm install --save dream-redux
复制代码

轻松搭建

dream-redux 集成了 redux,react-redux,redux-persist,redux-thunk,redux-promise 等常规 Redux 开发套装,并且只需要“一个配置”和“两行代码”,就能完成众多 Redux 系列库的搭建。

// src/store/index.js

import { StoreCreator } from 'dream-redux'

// 【一个配置】
const config = {
  reducerConfig: {
    name: 'app',
    initialState: { count: 0, list: [] }
  }
}

// 【第一行代码】实例化并导出 store 和 APIs
export const { 
  store,          // 核心对象,同 redux 的 store
  useSelector,    // 获取状态的 API,同 react-redux 的 useSelector
  setReducer,     // 极简的 dispatch API
  commitMutation  // 功能完善的 dispatch API
} = new StoreCreator(config)
复制代码
// src/index.jsx

import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'dream-redux'
import { store } from './store/index.js'
import App from './App.jsx'

// 【第二行代码】使用 Provider 引入 store,包裹项目代码
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root'),
)
复制代码

轻松更新

dream-redux 凭借 immer 库强大的特性,让不可变状态可以被“直接”修改。而且,更新过程无需统一在 reducer 中处理,而是既可以在组件中直接修改,也可以合并到 action 中,形成一个类似 Vuex 的 Mutation 结构,在 mutation 对象中完成修改。

这样便无需再专门维护 reducer 函数,对用于匹配的 type 的严格要求也不再必须了,大大减少了机械编写的代码量。

import React from 'react'
import { useSelector, setReducer, commitMutation } from 'src/store/index.js'

export default function Example() {
  // useSelector 用法和 react-redux 完全一样
  const count = useSelector(state => state.count)
  const list = useSelector(state => state.list)

  function runSetReducer() {
    // 最简单的修改方法,不建议在正式项目里使用
    setReducer('app', state => {
      state.count++
    })
  }
  
  function runCommitMutation() {
    // 正式项目中,一般会将多个 mutationCreator 统一写在一个单独的文件中
    const mutationCreator = listItem => {
      return {  // 返回一个 mutation 对象
        type: 'EXAMPLE_A',
        target: 'app',
        operation: state => {
          state.list.push(listItem)
        }
      }
    }
    commitMutation(mutationCreator('This is an example text'))
  }
  
  return (
    <div>
      <div>{count}</div>
      <div>
        {list.map((item, index) => (
          <div key={index}>{item}</div>
        ))}
      </div>
      <button onClick={runSetReducer}>SetReducer</button>
      <button onClick={runCommitMutation}>CommitMutation</button>
    </div>
  )
}
复制代码

可以看到,更新流程中,开发者只需要编写 mutationCreator,更新逻辑直接写在 mutation 中,使用时在组件里通过 commitMutation 调用即可。

以上就是 dream-redux 的入门介绍了,是不是非常的简洁!

dream-redux 对开发中普遍遇到的复杂场景和解决方案,都有对应的文档进行教学。可以 点击进入 GitHub 仓库 查阅详细文档。

兼容第三方库

dream-redux 内置了最常用的 redux-thunk,也实现了 redux-promise 的功能,未来还会继续整合优秀的中间件。如果开发者需要自行添加或编写中间件,比如 redux-saga,可以按照文档的格式传入中间件使用。

由于 dream-redux 实质上并没有修改 redux 和 react-redux,所以并不影响绝大部分中间件和第三方库的使用。如果有一些实用的库无法兼容,烦请在 Issue 中告知,我们会尽快整合或给出解决方案。

方便不同背景的开发者轻松上手

零基础者

对于从来没使用过 Redux,Mobx 或 Vuex 的开发者,dream-redux 应该是最适合上手的之一了。免去各种干扰,只需了解 reducer 和 mutation 的基本概念,就可以动手开发了。

了解过 Redux 和 Dva

dream-redux 类似于使用 thunk 而非 saga 处理异步,直接修改状态而非编写 switch-case 和构建新对象的 Dva。两者在不同方面有各自优势。如果更偏向 reducer 统一处理的写法,或者要搭配 umi 框架使用,请选择 Dva。

了解过 Vuex

对于使用过 Vuex 的开发者,那使用 dream-redux 时一定会十分熟悉,因为更新流程的代码结构就是借鉴了 Vuex 的 Mutation 和 Action,在单 reducer 模式下更新流程基本一致。

结束语

Redux 相比其他状态管理库,虽然入门比较难。但上手后,清晰的工作流程和强大灵活的中间件机制,让各种复杂度的开发都不至于出现不可预期的 bug。

并不复杂的 redux 和 react-redux 源码,也方便开发者精通底层原理,这也间接促成了社区生态的繁荣。(react-redux 的源码客观上还是有些难的,但比起同级别的其他库,已经算是很良心了。)

而 dream-redux 就是专门为了降低 Redux 使用门槛而生的

希望这个项目,能帮助曾经或即将入门 Redux 被劝退的童鞋,重新看待这个经典的宝藏框架;也能帮助已经上手,却被繁琐操作困扰的朋友,代码能敲得更加顺畅。

之后可能还会写一些有关 Redux 的源码文章,简明扼要地分析一下 Redux 系列的核心流程和 dream-redux 的一些开发思路,让大家不再畏惧这个又爱又恨的前端精品。

也希望大家能不吝支持一下,给 dream-redux 来个 star,给予我更多开发和创作的动力,在此谢过!

链接1:dream-redux GitHub 地址,内有详细文档说明。

链接2:结合 dream-redux 和 typescript 开发的开源 CMS 项目 lin-cms-react,可查看在实际项目中的架构和使用情况。