一個徹底改變Redux的簡潔設計

unadlib發表於2019-03-31
Redux

從第一個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: github.com/unadlib/usm。

相關文章