從第一個Redux Commit到現(xiàn)在撑毛，已快四年了乒躺。期間，陸陸續(xù)續(xù)有各種對于Redux進行再設(shè)計與封裝的探索愿题，其中以O(shè)OP設(shè)計尤為突出西剥，而usm-redux便是一個徹底改變Redux固有使用方式的庫痹栖。
從根本上說，usm-redux是一個完全為OOP而生的Redux再封裝庫瞭空，它讓Redux的使用變得無比簡潔揪阿。
接下來我們先看一個redux官方文檔中的經(jīng)典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例子(和上面完全一樣的邏輯實現(xiàn))：
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的定義南捂，除此以外，與你經(jīng)常使用的類的OOP完全一致旧找。
一個完全等價的TODO之間的比較溺健，我們可以發(fā)現(xiàn)，usm-redux邏輯靠近與更貼近OOP的方式钮蛛，讓想使用OOP的人得心應手鞭缭。
同時usm-redux還提供了@computed來進行衍生計算的緩存。它能極大的優(yōu)化react衍生數(shù)據(jù)的重復計算魏颓。
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將讓你的項目也商業(yè)邏輯變得更加內(nèi)聚岭辣。同時配合React的Hooks, 讓React+Redux輕松實現(xiàn)在高內(nèi)聚和低耦合。
隨便提一下琼开，usm-redux是一個基于通用化狀態(tài)模塊的概念而設(shè)計usm易结。簡單說枕荞，usm就是可以讓你輕松使用Redux/Vuex/MobX等主流狀態(tài)庫而不用費心去分別學習和使用它們柜候。
更多關(guān)于usm-redux的features以及usm，可以訪問Repo: https://github.com/unadlib/usm躏精。
