一个彻底改变Redux的简洁设计

#1

从第一个Redux Commit到现在，已快四年了。期间，陆陆续续有各种对于Redux进行再设计与封装的探索，其中以OOP设计尤为突出，而usm-redux便是一个彻底改变Redux固有使用方式的库。

说根本上说，usm-redux是一个完全为OOP而生的Redux再封装库，它让Redux的使用变得无比简洁。

接下来我们先看一个redux官方文档中的经典Todo例子：

import { createStore, combineReducers } from 'redux'

// action
let nextTodoId = 0
const addTodo = text => {
  return {
    type: 'ADD_TODO',
    id: nextTodoId++,
    text
  }
}

const setVisibilityFilter = filter => {
  return {
    type: 'SET_VISIBILITY_FILTER',
    filter
  }
}

const toggleTodo = id => {
  return {
    type: 'TOGGLE_TODO',
    id
  }
}

// reducers
const todos = (state = [], action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return [
        ...state,
        {
          id: action.id,
          text: action.text,
          completed: false
        }
      ]
    case 'TOGGLE_TODO':
      return state.map(todo =>
        (todo.id === action.id) 
          ? {...todo, completed: !todo.completed}
          : todo
      )
    default:
      return state
  }
}

const visibilityFilter = (state = 'SHOW_ALL', action) => {
  switch (action.type) {
    case 'SET_VISIBILITY_FILTER':
      return action.filter
    default:
      return state
  }
}

const todoApp = combineReducers({
  todos,
  visibilityFilter
})

这里只是为了写一个简单的todo，但Redux的boilerplate显然就是如此。

下面是一个usm-redux的todo例子(和上面完全一样的逻辑实现)：

import Module, { state, action } from 'usm-redux'

class TodoList extends Module {
  @state todos = []
  @state visibilityFilter = 'SHOW_ALL'
  nextTodoId = 0

  @action
  add(text, state) {
    this.nextTodoId++
    state.todos.push({
      text,
      id: this.nextTodoId,
      completed: false,
    })
  }

  @action
  toggle(id, state) {
    const todo = state.todos.find(todo => todo.id === id)
    todo.completed = !todo.completed
  }

  @action
  setVisibility(filter, state) {
    state.visibilityFilter = filter
  }
}

usm-redux 只有@state和 @action的定义，除此以外，与你经常使用的类的OOP完全一致。
一个完全等价的TODO之间的比较，我们可以发现，usm-redux逻辑靠近与更贴近OOP的方式，让想使用OOP的人得心应手。
同时usm-redux还提供了@computed来进行衍生计算的缓存。它能极大的优化react衍生数据的重复计算。

class Shop extends Module {
  @state goods = [];
  @state status = 'close';

  @action
  operate(item, status, state) {
    state.goods.push(item);
    state.status = status;
  }
  // call -> this.operate({ name: 'fruits', amount: 10 }, 'open');

  @computed
  shortages = [
    () => this.goods,
    (goods) => goods.filter(item => item.amount < 5)
  ];
}

模块化地使用usm-redux将让你的项目也商业逻辑变得更加内聚。同时配合React的Hooks, 让React+Redux轻松实现在高内聚和低耦合。

随便提一下，usm-redux是一个基于通用化状态模块的概念而设计usm。简单说，usm就是可以让你轻松使用Redux/Vuex/MobX等主流状态库而不用费心去分别学习和使用它们。

更多关于usm-redux的features以及usm，可以访问Repo: https://github.com/unadlib/usm。