一种简化 Redux 的思路
来源:互联网 发布:淘宝不能结算怎么回事 编辑:程序博客网 时间:2024/05/16 08:42
点击有惊喜
动机
我们热爱 React 和 Redux。但是,Redux 中有太多的样板文件,需要很多的重复劳动,这一点令人沮丧;更别提在实际的 React 应用中,还要集成 react-router
的路由功能了。
一个典型的 React/Redux 应用看起来像下面这样:
actions.js
export const ADD_TODO = 'todos/add'export const COMPLETE_TODO = 'todos/complete'export function addTodo(text) { return { type: ADD_TODO, text }}export function completeTodo(id) { return { type: COMPLETE_TODO, id }}
reducers.js
import { ADD_TODO, COMPLETE_TODO } from './actions'let nextId = 0export default function todos(state = [], action) { switch (action.type) { case ADD_TODO: return [...state, {text: action.text, id: nextId++}] case COMPLETE_TODO: return state.map(todo => { if (todo.id === action.id) todo.completed = true return todo }) default: return state }}
Todos.js
import { addTodo, completeTodo } from './actions'// ...// 在某个事件处理函数中dispatch(addTodo('a new todo'))// 在另一个事件处理函数中dispatch(completeTodo(42))
看起来是不是有点繁冗?这还是没考虑 异步 action
的情况呢。如果要处理异步 action
,还需要引入 middleware(比如 redux-thunk
或者 redux-saga
),那么代码就更繁琐了。
在一个接口中定义 action/reducer?
Todos.js
import mirror, { actions } from 'mirrorx'let nextId = 0mirror.model({ name: 'todos', initialState: [], reducers: { add(state, text) { return [...state, {text, id: nextId++}] }, complete(state, id) { return state.map(todo => { if (todo.id === id) todo.completed = true return todo }) } }})// ...// 在某个事件处理函数中actions.todos.add('a new todo')// 在另一个事件处理函数中actions.todos.complete(42)
是不是就简单很多了?只需一个方法,即可定义所有的 action
和 reducer
(以及 异步 action
)。
而且,这行代码:
actions.todos.add('a new todo')
完全等同于这行代码:
dispatch({ type: 'todos/add', text: 'a new todo'})
完全不用关心具体的 action type
,不用写大量的重复代码。简洁,高效。
异步 action
上述代码示例仅仅针对同步 action
。那 异步 action
怎么处理呢?
mirror.model({ // 省略前述代码 effects: { async addAsync(data, getState) { const res = await Promise.resolve(data) // 调用 `actions` 上的方法 dispatch 一个同步 action actions.todos.add(res) } }})
没错,这样就定义了一个异步 action
。上述代码的效果等同于如下代码:
actions.todos.addSync = (data, getState) => { return dispatch({ type: 'todos/addAsync', data })}
调用 actions.todos.addSync
方法,则会 dispatch 一个 type 为 todos/addAsync
的 action。
当然,处理这样的 action,必须要借助于 middleware。不过实现这样一个 middleware 也非常简单,开发者只管定义 action/reducer,然后简单地调用一个函数就行了。
总结
既然是对现有开发模式做封装和简化,那么要秉承的一个原则应该是,在尽可能地避免发明新的概念,并保持现有开发模式的前提下,减少重复劳动,提高开发效率。
只提供极少数的新 API,其余的都借用 React/Redux/react-router 已有的接口,针对其做封装和强化。
也就是说,不去“颠覆” React/Redux 开发流,只是简化了接口调用,省去样板代码:
针对上面描述的思路,初步完成了一个“框架”,Mirror。
点击有惊喜
- 一种简化 Redux 的思路
- React-Redux的用法思路
- 解读 redux 的设计思路与用法
- 系统分析的一种思路
- 移植的一种思路
- for循环的一种简化
- react Redux思路
- 一种循环注入的思路
- Flex模块化的一种思路
- 一种计算留存的思路
- HDOJ4602【一种巧妙的思路】
- 一种异步保存的思路
- 学习知识的一种思路
- 混音的一种思路
- 安卓换肤的一种实现思路
- 一种简化决策树ROC的方法
- 一种新的编程思路(上)
- 一种新的编程思路(中):
- SPEC 虚拟机配置
- 笔记 jquery.trim()
- Java设计模式——观察者模式
- 最短路径(迪杰斯特拉)
- 数据结构之排序算法
- 一种简化 Redux 的思路
- 数据缺失的坑,无监督学习这样帮你补了
- cassandra的简单应用
- break、continue、return的区别
- sas中连接mysql数据库,中文乱码问题解决
- Net-snmp总结(四)-net-snmp的MIBs扩展_添加set
- mysql事务
- 哈夫曼树结构和带权路径长度计算
- HashMap