从第一个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。
网友评论