Redux 的基础概念

标签：

三个基本原则

整个应用只有唯一一个可信数据源，也就是只有一个 Store

State 只能通过触发 Action 来更改

State 的更改必须写成纯函数，也就是每次更改总是返回一个新的 State，在 Redux 里这种函数称为 Reducer

Actions

Action 很简单，就是一个单纯的包含 { type, payload } 的对象，type 是一个常量用来标示动作类型，payload 是这个动作携带的数据。Action 需要通过 store.dispatch() 方法来发送。

比如一个最简单的 action：

{ type: ‘ADD_TODO‘, text: ‘Build my first Redux app‘ }

一般来说，会使用函数（Action Creators）来生成 action，这样会有更大的灵活性，Action Creators 是一个pure function，它最后会返回一个 action 对象：

function addTodo(text) { return { type: ‘ADD_TODO‘, text } }

所以现在要触发一个动作只要调用 dispatch: dispatch(addTodo(text))

稍后会讲到如何拿到 store.dispatch

Reducers

Reducer 用来处理 Action 触发的对状态树的更改。

所以一个 reducer 函数会接受 oldState 和 action 两个参数，返回一个新的 state：(oldState, action) => newState。一个简单的 reducer 可能类似这样：

值得注意的有两点：

Reducer 也是 pure function，这点非常重要，所以绝对不要在 reducer 里面做一些引入 side-effects 的事情，比如：

直接修改 state 参数对象

请求 API

调用不纯的函数，比如 Data.now() Math.random()

因为 Redux 里面只有一个 Store，对应一个 State 状态，所以整个 State 对象就是由一个 reducer 函数管理，但是如果所有的状态更改逻辑都放在这一个 reducer 里面，显然会变得越来越巨大，越来越难以维护。得益于纯函数的实现，我们只需要稍微变通一下，让状态树上的每个字段都有一个 reducer 函数来管理就可以拆分成很小的 reducer 了：

function someApp(state = {}, action) { return { a: reducerA(state.a, action), b: reducerB(state.b, action) }; }

对于 reducerA 和 reducerB 来说，他们依然是形如：(oldState, action) => newState 的函数，只是这时候的 state 不是整个状态树，而是树上的特定字段，每个 reducer 只需要判断 action，管理自己关心的状态字段数据就好了。

Redux 提供了一个工具函数 combineReducers 来简化这种 reducer 合并：

import { combineReducers } from ‘redux‘; const someApp = combineReducers({ a: reducerA, b: reducerB });

如果 reducer 函数名字和字段名字相同，利用 ES6 的 Destructuring 可以进一步简化成：combineReducers({ a, b })

象 someApp 这种管理整个 State 的 reducer，可以称为 root reducer。

Store

现在有了 Action 和 Reducer，Store 的作用就是连接这两者，Store 的作用有这么几个：

Hold 住整个应用的 State 状态树

提供一个 getState() 方法获取 State

提供一个 dispatch() 方法发送 action 更改 State

提供一个 subscribe() 方法注册回调函数监听 State 的更改

创建一个 Store 很容易，将 root reducer 函数传递给 createStore 方法即可：

import { createStore } from ‘redux‘; import someApp from ‘./reducers‘; let store = createStore(someApp); // 你也可以额外指定一个初始 State（initialState），这对于服务端渲染很有用 // let store = createStore(someApp, window.STATE_FROM_SERVER);

现在我们就拿到了 store.dispatch，可以用来分发 action 了：

let unsubscribe = store.subscribe(() => console.log(store.getState())); // Dispatch store.dispatch({ type: ‘CHANGE_A‘ }); store.dispatch({ type: ‘CHANGE_B‘, payload: ‘Modified b‘ }); // Stop listening to state updates unsubscribe(); Data Flow

以上提到的 store.dispatch(action) -> reducer(state, action) -> store.getState() 其实就构成了一个“单向数据流”，我们再来总结一下。

1. 调用 store.dispatch(action)

秒客网

Redux 的基础概念

相关文章