系列文章:
Redux 入门(本文)
状态管理,第一次听到这个词要追溯到去年年底。那时,Flux 红透半边天,而 Reflux 也是风华正茂。然而,前一阵一直在忙其他的事,一直没时间学学这两个库,到现在 Redux 似乎又有一统天下的趋势。
那就来看看,Redux 是凭借什么做到异军突起的。
What's Redux
Redux 是一个 JavaScript 应用状态管理的库,它帮助你编写行为一致,并易于测试的代码,而且它非常迷你,只有 2KB。
Redux 有一点和别的前端库或框架不同,它不单单是一套类库,它更是一套方法论,告诉你如何去构建一个状态可预测的应用。
Why using Redux
随着单页应用变得越来越复杂,前端代码需要管理各种各样的状态,它可以是服务器的响应,也可能是前端界面的状态。当这个状态变得任意可变,那么你就可能在某个时间点失去对整个应用状态的控制。
Redux 就是为了解决这个问题而诞生的。
简短地说,Redux 为整个应用创建并管理一棵状态树,并通过限制更新发生的时间和方式,而使得整个应用状态的变化变得可以被预测。
除此之外,Redux 有着一整套丰富的生态圈,包括教程、中间件、开发者工具及文档,这些都可以在官方文档中找到。
How to use Redux
三大原则
在使用 Redux 之前,你必须要谨记它的三大原则:单一数据源、state
是只读的和使用纯函数执行修改。
-
单一数据源
整个应用的
state
都被储存在一棵树中,并且这棵状态树只存在于唯一一个store
中。这使得来自服务端的
state
可以轻易地注入到客户端中;并且,由于是单一的state
树,代码调试、以及“撤销/重做”这类功能的实现也变得轻而易举。 -
只读的
state
唯一改变
state
的方法就是触发action
,action
是一个用于描述已发生事件的普通对象。这就表示无论是用户操作或是请求数据都不能直接修改
state
,相反它们只能通过触发action
来变更当前应用状态。其次,action
就是普通对象,因此它们可以被日志打印、序列化、储存,以及用于调试或测试的后期回放。 -
在这里,
reducer
要做到只要传入参数相同,返回计算得到的下一个 state 就一定相同。没有特殊情况、没有副作用,没有 API 请求、没有变量修改,只进行单纯执行计算。知道了三大原则之后,那就可以开始了解如何创建一个基于 Redux 的应用。
Action
就如之前提到的,action
是一个描述事件的简单对象,它是改变 store
中 state
的唯一方法,它通过 store.dispatch()
方法来将 action
传到 store
中。
下面就是一个 action
的例子,它表示添加一个新的 todo 项。
const ADD_TODO = 'ADD_TODO' // action { type: ADD_TODO,text: 'Build my first Redux app' }
可以看到 action
就是一个简单的 JavaScript 对象。
用一个字符串类型的 type
字段来表示将要执行的动作,type
最好用常量来定义,当应用扩大时,可以使用单独的模块来存放 action
。
除了 type
字段外,action
对象的结构完全由你自己决定(也可以借鉴 flux-standard-action 来构建你的 action
)。
在现实场景中,action
所传递的值很少会是一个固定的值,都是动态产生的。所以,要为每个 action
创建它的工厂方法,工厂方法返回一个 action
对象。
上面的那个例子就会变为:
function addTodo(text) { return { type: ADD_TODO,text } }
Action
的创建工厂可以是异步非纯函数。牵扯到异步的问题内容就比较多,放到下一篇再分享了。
Reducer
Action
只是一个描述事件的简单对象,并没有告诉应用该如何更新 state
,而这正是 reducer
的工作。
在 Redux 应用中,所有的 state
都被保存在一个单一对象中。所以,建议在写代码前先确定这个对象的结构。如何才能以最简的形式把应用的 state
用对象描述出来?
在设计过程中,你会发现你有时需要在 state
中存储一些如 UI 的 state
,尽量将应用数据和 UI state
分开存放。
{ todos: [ { text: 'Consider using Redux',completed: true,},{ text: 'Keep all state in a single tree',completed: false } ] }
注意:在处理复杂应用时,建议尽可能地把 state
范式化,把所有数据放到一个对象里,每个数据以 ID 为主键,不同实体或列表间通过 ID 相互引用数据,这种方法在 normalizr 文档里有详细阐述。
现在我们已经确定了 state
对象的结构,就可以开始开发 reducer
。reducer
是一个纯函数,它接收旧的 state
和 action
,返回新的 state
,就像这样
(prevIoUsState,action) => newState
还记不记得三大原则?
没错,最后一点使用纯函数进行修改,所以,永远不要在 reducer
里做这些操作:
将这些铭记于心后,就能创建对应之前 action
的 reducer
了。
const initialState = { todos: [] } function todoApp(state = initialState,action) { switch (action.type) { case ADD_TODO: return { ...state,todos: [ ...state.todos,{ text: action.text,completed: false } ] } default: return state } }
注意:
这样一个 reducer
就创建好了,是不是很简单?多个 action
也是如此,我们再来添加一个
case TOGGLE_TODO: return { ...state,todos: state.todos.map((todo,index) => { if (index === action.index) { return { ...todo,completed: !todo.completed } // 时刻谨记不要修改 state,保证 reducer 是纯函数 } return todo }) }
从例子中可以发现,当对 state
的一部分进行操作时,不会影响 state
的其他部分,但仍需复制 state
树的其他部分。当项目的规模成长时,state
树的层次也会随之增长,对树深层节点的操作将会带来大量的复制。
此时,我们就可以将这些相互独立的 reducer
拆分开来,我们之前的例子就可以改成这样(官网的例子更能体现这一点,为了缩减篇幅我这里省略了另一个 reducer
)。
// todos reducer function todos(state = [],action) { switch (action.type) { case ADD_TODO: return [ ...state,{ text: action.text,completed: false } ] case TOGGLE_TODO: return state.map((todo,index) => { if (index === action.index) { return { ...todo,completed: !todo.completed } // 时刻谨记不要修改 state,保证 reducer 是纯函数 } return todo }) default: return state } } // main reducer function todoApp(state = initialState,action) { switch (action.type) { case ADD_TODO: case TOGGLE_TODO: return { ...state,todos: todos(state.todos,action) } default: return state } }
这就是所谓的 reducer
合成,它是开发 Redux 应用的基础。
注意:每个 reducer
应当只负责管理全局 state
中它负责的一部分;并且,每个 reducer
的 state
参数分别对应它管理的那部分 state
。
由于,每个 reducer
应当只负责管理全局 state
中它负责的一部分,那么上面的 main reducer
就能改为
// main reducer function todoApp(state = initialState,action) { return { todos: todos(state.todos,action) } }
最后,Redux 提供了 combineReducers()
工具类,它能帮我们减少很多重复的模板代码。
combineReducers()
就像一个工厂,它根据传入对象的 key 来筛选出 state
中 key 所对应的值传给对应的 reducer
,最终它返回一个符合规范的 reducer 函数。
最终,我们的 main reducer
就变为
// main reducer const todoApp = combineReducers({ todos // 等价于 todos: todos(state.todos,action) })
随着应用的膨胀,你可以将拆分后的 reducer
放到不同的文件中,以保持其独立性。然后,你的代码就可以变成这样...
import { combineReducers } from 'redux' import * as reducers from './reducers' const todoApp = combineReducers(reducers) export default todoApp
Store
Store
用来存放整个应用的 state
,并将 action
和 reducer
联系起来。它主要有以下几个职能:
根据已有的 reducer
来创建 store
非常容易,只需将 reducer
作为参数传递给 createStore()
方法。
import { createStore } from 'redux' import todoApp from './reducers' let store = createStore(todoApp)
这样,整个应用的 store
就创建完成了。虽然还没有界面,但我们已经可以测试数据处理逻辑了。
import { addTodo,toggleTodo } from './actions' // 打印初始状态 console.log(store.getState()) // 注册监听器,在每次 state 更新时,打印日志 const unsubscribe = store.subscribe(() => console.log(store.getState()) ) // 发起 actions store.dispatch(addTodo('Learn about actions')) store.dispatch(addTodo('Learn about reducers')) store.dispatch(addTodo('Learn about store')) store.dispatch(actions.toggleTodo(0)) store.dispatch(actions.toggleTodo(1)) // 停止监听 unsubscribe();
Data flow
时刻谨记一点:严格的单向数据流是 Redux 架构的设计核心。
也就是说,对 state
树的任何修改都该通过 action
发起,然后经过一系列 reducer
组合的处理,最后返回一个新的 state
对象。
Take a try with Angular
之前的举例已经将 redux 最基本的一套生命周期处理展示完毕了,但没有个界面显示总是不那么令人信服。Redux 官网的例子是将 Redux 同 React 一起使用,但如同一开始说的,Redux 更是一套方法论,它不单可以和 React 一同使用,也可以和 Angular 等其他框架一同使用。
虽然,同官网用的是不同的框架,但概念是相通的。
首先,页面都是由组件构成,组件又分为两大类:容器组件(Smart/Container Components)和展示组件(Dumb/Presentational Components)。
容器组件 | 展示组件 | |
---|---|---|
目的 | 数据处理,state 更新 | 界面展示 |
受 redux 影响 | 是 | 否 |
数据来源 | store.subscribe() |
组件属性传递 |
修改数据 | store.dispatch() |
调用通过组件属性传递的方法 |
简单来说,容器组件就是通过 store.subscribe()
这个方法监听 store
中 state
的变化,而展示组件,就是平常使用的普通的组件,只有一点需要注意的是,所有数据修改都是通过父组件中传递下来的 store.dispatch()
方法来修改。
可以说,容器组件是整个界面显示的核心。
// todos/index.js import angular from 'angular' import template from './todos.html' import controller from './todos' const todoContainer = { controller,template } export default angular.module('todoContainer',[]) .component('todoContainer',todoContainer) .name // todos/todos.js import store from '../../store' import actions from '../../actions' export default class TodosContainController { $onInit() { // 注册监听器,在每次 state 更新时,更新页面绑定内容 this.unsubscribe = store.subscribe(() => { console.log(store.getState()) this.todos = store.getState().todos }) } addTodoItem(text) { store.dispatch(actions.addTodo(text)) } toggleTodoItem(index) { store.dispatch(actions.toggleTodo(index)) } $onDistory() { // 销毁监听器 this.unsubscribe() } } // todos/todos.html <div> <add-todo add-todo-fn="$ctrl.addTodoItem(text)"></add-todo> <todo-list todo-list="$ctrl.todos" toggle-todo-fn="$ctrl.toggleTodoItem(index)"></todo-list> </div>
Redux 官网并不建议直接这样使用 store.subscribe()
来监听数据的变化,而是调用 React Redux 库的 connect()
方法,因为 connect
方法做了许多性能上的优化。相对于 Angular,也有 ng-redux 和 ng2-redux 提供了相同的方法。
鉴于展示组件与 redux 并没有太大的相关,就不在这里赘述了,有兴趣可以去 github 上查看。
至此,一个简单的基于 Angular 并运用 Redux 的 todo MVC 应用就完成了。
最后
如果你熟悉 Flux,那么这篇图文并茂的文章获取会对你有很大的帮助。
如果你是和我一样直接接触 Redux,那官方文档是你的首选。
当然,你一定得看看 Redux 作者 Dan Abramov 自己录制的视频,它会对你理解 Redux 有极大的帮助。