一年半前，我写了《React 入门实例教程》，介绍了 React 的基本用法。前端
React 只是 DOM 的一个抽象层，并非 Web 应用的完整解决方案。有两个方面，它没涉及。java
- 代码结构
- 组件之间的通讯
对于大型的复杂应用来讲，这两方面偏偏是最关键的。所以，只用 React 无法写大型应用。react
为了解决这个问题，2014年 Facebook 提出了 Flux 架构的概念，引起了不少的实现。2015年，Redux 出现，将 Flux 与函数式编程结合一块儿，很短期内就成为了最热门的前端架构。git
本文详细介绍 Redux 架构，因为内容较多，全文分红三个部分。今天是第一部分，介绍基本概念和用法。github
零、你可能不须要 Redux
首先明确一点，Redux 是一个有用的架构，但不是非用不可。事实上，大多数状况，你能够不用它，只用 React 就够了。编程
曾经有人说过这样一句话。redux
"若是你不知道是否须要 Redux，那就是不须要它。"数组
Redux 的创造者 Dan Abramov 又补充了一句。
"只有遇到 React 实在解决不了的问题，你才须要 Redux 。"
简单说，若是你的UI层很是简单，没有不少互动，Redux 就是没必要要的，用了反而增长复杂性。
- 用户的使用方式很是简单
- 用户之间没有协做
- 不须要与服务器大量交互，也没有使用 WebSocket
- 视图层（View）只从单一来源获取数据
上面这些状况，都不须要使用 Redux。
- 用户的使用方式复杂
- 不一样身份的用户有不一样的使用方式（好比普通用户和管理员）
- 多个用户之间能够协做
- 与服务器大量交互，或者使用了WebSocket
- View要从多个来源获取数据
上面这些状况才是 Redux 的适用场景：多交互、多数据源。
从组件角度看，若是你的应用有如下场景，能够考虑使用 Redux。
- 某个组件的状态，须要共享
- 某个状态须要在任何地方均可以拿到
- 一个组件须要改变全局状态
- 一个组件须要改变另外一个组件的状态
发生上面状况时，若是不使用 Redux 或者其余状态管理工具，不按照必定规律处理状态的读写，代码很快就会变成一团乱麻。你须要一种机制，能够在同一个地方查询状态、改变状态、传播状态的变化。
总之，不要把 Redux 看成万灵丹，若是你的应用没那么复杂，就不必用它。另外一方面，Redux 只是 Web 架构的一种解决方案，也能够选择其余方案。
1、预备知识
阅读本文，你只须要懂 React。若是还懂 Flux，就更好了，会比较容易理解一些概念，但不是必需的。
Redux 有很好的文档，还有配套的小视频（前30集，后30集）。你能够先阅读本文，再去官方材料详细研究。
个人目标是，提供一个简洁易懂的、全面的入门级参考文档。
2、设计思想
Redux 的设计思想很简单，就两句话。
（1）Web 应用是一个状态机，视图与状态是一一对应的。
（2）全部的状态，保存在一个对象里面。
请务必记住这两句话，下面就是详细解释。
3、基本概念和 API
3.1 Store
Store 就是保存数据的地方，你能够把它当作一个容器。整个应用只能有一个 Store。
Redux 提供createStore这个函数，用来生成 Store。
import { createStore } from 'redux'; const store = createStore(fn);
上面代码中，createStore函数接受另外一个函数做为参数，返回新生成的 Store 对象。
3.2 State
Store对象包含全部数据。若是想获得某个时点的数据，就要对 Store 生成快照。这种时点的数据集合，就叫作 State。
当前时刻的 State，能够经过store.getState()拿到。
import { createStore } from 'redux'; const store = createStore(fn); const state = store.getState();
Redux 规定， 一个 State 对应一个 View。只要 State 相同，View 就相同。你知道 State，就知道 View 是什么样，反之亦然。
3.3 Action
State 的变化，会致使 View 的变化。可是，用户接触不到 State，只能接触到 View。因此，State 的变化必须是 View 致使的。Action 就是 View 发出的通知，表示 State 应该要发生变化了。
Action 是一个对象。其中的type属性是必须的，表示 Action 的名称。其余属性能够自由设置，社区有一个规范能够参考。
const action = { type: 'ADD_TODO', payload: 'Learn Redux' };
上面代码中，Action 的名称是ADD_TODO，它携带的信息是字符串Learn Redux。
能够这样理解，Action 描述当前发生的事情。改变 State 的惟一办法，就是使用 Action。它会运送数据到 Store。
3.4 Action Creator
View 要发送多少种消息，就会有多少种 Action。若是都手写，会很麻烦。能够定义一个函数来生成 Action，这个函数就叫 Action Creator。
const ADD_TODO = '添加 TODO'; function addTodo(text) { return { type: ADD_TODO, text } } const action = addTodo('Learn Redux');
上面代码中，addTodo函数就是一个 Action Creator。
3.5 store.dispatch()
store.dispatch()是 View 发出 Action 的惟一方法。
import { createStore } from 'redux'; const store = createStore(fn); store.dispatch({ type: 'ADD_TODO', payload: 'Learn Redux' });
上面代码中，store.dispatch接受一个 Action 对象做为参数，将它发送出去。
结合 Action Creator，这段代码能够改写以下。
store.dispatch(addTodo('Learn Redux'));
3.6 Reducer
Store 收到 Action 之后，必须给出一个新的 State，这样 View 才会发生变化。这种 State 的计算过程就叫作 Reducer。
Reducer 是一个函数，它接受 Action 和当前 State 做为参数，返回一个新的 State。
const reducer = function (state, action) { // ... return new_state; };
整个应用的初始状态，能够做为 State 的默认值。下面是一个实际的例子。
const defaultState = 0; const reducer = (state = defaultState, action) => { switch (action.type) { case 'ADD': return state + action.payload; default: return state; } }; const state = reducer(1, { type: 'ADD', payload: 2 });
上面代码中，reducer函数收到名为ADD的 Action 之后，就返回一个新的 State，做为加法的计算结果。其余运算的逻辑（好比减法），也能够根据 Action 的不一样来实现。
实际应用中，Reducer 函数不用像上面这样手动调用，store.dispatch方法会触发 Reducer 的自动执行。为此，Store 须要知道 Reducer 函数，作法就是在生成 Store 的时候，将 Reducer 传入createStore方法。
import { createStore } from 'redux'; const store = createStore(reducer);
上面代码中，createStore接受 Reducer 做为参数，生成一个新的 Store。之后每当store.dispatch发送过来一个新的 Action，就会自动调用 Reducer，获得新的 State。
为何这个函数叫作 Reducer 呢？由于它能够做为数组的reduce方法的参数。请看下面的例子，一系列 Action 对象按照顺序做为一个数组。
const actions = [ { type: 'ADD', payload: 0 }, { type: 'ADD', payload: 1 }, { type: 'ADD', payload: 2 } ]; const total = actions.reduce(reducer, 0); // 3
上面代码中，数组actions表示依次有三个 Action，分别是加0、加1和加2。数组的reduce方法接受 Reducer 函数做为参数，就能够直接获得最终的状态3。
3.7 纯函数
Reducer 函数最重要的特征是，它是一个纯函数。也就是说，只要是一样的输入，一定获得一样的输出。
纯函数是函数式编程的概念，必须遵照如下一些约束。
- 不得改写参数
- 不能调用系统 I/O 的API
- 不能调用
Date.now()或者Math.random()等不纯的方法，由于每次会获得不同的结果
因为 Reducer 是纯函数，就能够保证一样的State，一定获得一样的 View。但也正由于这一点，Reducer 函数里面不能改变 State，必须返回一个全新的对象，请参考下面的写法。
// State 是一个对象 function reducer(state, action) { return Object.assign({}, state, { thingToChange }); // 或者 return { ...state, ...newState }; } // State 是一个数组 function reducer(state, action) { return [...state, newItem]; }
最好把 State 对象设成只读。你无法改变它，要获得新的 State，惟一办法就是生成一个新对象。这样的好处是，任什么时候候，与某个 View 对应的 State 老是一个不变的对象。
3.8 store.subscribe()
Store 容许使用store.subscribe方法设置监听函数，一旦 State 发生变化，就自动执行这个函数。
import { createStore } from 'redux'; const store = createStore(reducer); store.subscribe(listener);
显然，只要把 View 的更新函数（对于 React 项目，就是组件的render方法或setState方法）放入listen，就会实现 View 的自动渲染。
store.subscribe方法返回一个函数，调用这个函数就能够解除监听。
let unsubscribe = store.subscribe(() => console.log(store.getState()) ); unsubscribe();
4、Store 的实现
上一节介绍了 Redux 涉及的基本概念，能够发现 Store 提供了三个方法。
- store.getState()
- store.dispatch()
- store.subscribe()
import { createStore } from 'redux'; let { subscribe, dispatch, getState } = createStore(reducer);
createStore方法还能够接受第二个参数，表示 State 的最初状态。这一般是服务器给出的。
let store = createStore(todoApp, window.STATE_FROM_SERVER)
上面代码中，window.STATE_FROM_SERVER就是整个应用的状态初始值。注意，若是提供了这个参数，它会覆盖 Reducer 函数的默认初始值。
下面是createStore方法的一个简单实现，能够了解一下 Store 是怎么生成的。
const createStore = (reducer) => { let state; let listeners = []; const getState = () => state; const dispatch = (action) => { state = reducer(state, action); listeners.forEach(listener => listener()); }; const subscribe = (listener) => { listeners.push(listener); return () => { listeners = listeners.filter(l => l !== listener); } }; dispatch({}); return { getState, dispatch, subscribe }; };
5、Reducer 的拆分
Reducer 函数负责生成 State。因为整个应用只有一个 State 对象，包含全部数据，对于大型应用来讲，这个 State 必然十分庞大，致使 Reducer 函数也十分庞大。
请看下面的例子。
const chatReducer = (state = defaultState, action = {}) => { const { type, payload } = action; switch (type) { case ADD_CHAT: return Object.assign({}, state, { chatLog: state.chatLog.concat(payload) }); case CHANGE_STATUS: return Object.assign({}, state, { statusMessage: payload }); case CHANGE_USERNAME: return Object.assign({}, state, { userName: payload }); default: return state; } };
上面代码中，三种 Action 分别改变 State 的三个属性。
- ADD_CHAT：
chatLog属性- CHANGE_STATUS：
statusMessage属性- CHANGE_USERNAME：
userName属性
这三个属性之间没有联系，这提示咱们能够把 Reducer 函数拆分。不一样的函数负责处理不一样属性，最终把它们合并成一个大的 Reducer 便可。
const chatReducer = (state = defaultState, action = {}) => { return { chatLog: chatLog(state.chatLog, action), statusMessage: statusMessage(state.statusMessage, action), userName: userName(state.userName, action) } };
上面代码中，Reducer 函数被拆成了三个小函数，每个负责生成对应的属性。
这样一拆，Reducer 就易读易写多了。并且，这种拆分与 React 应用的结构相吻合：一个 React 根组件由不少子组件构成。这就是说，子组件与子 Reducer 彻底能够对应。
Redux 提供了一个combineReducers方法，用于 Reducer 的拆分。你只要定义各个子 Reducer 函数，而后用这个方法，将它们合成一个大的 Reducer。
import { combineReducers } from 'redux'; const chatReducer = combineReducers({ chatLog, statusMessage, userName }) export default todoApp;
上面的代码经过combineReducers方法将三个子 Reducer 合并成一个大的函数。
这种写法有一个前提，就是 State 的属性名必须与子 Reducer 同名。若是不一样名，就要采用下面的写法。
const reducer = combineReducers({ a: doSomethingWithA, b: processB, c: c }) // 等同于 function reducer(state = {}, action) { return { a: doSomethingWithA(state.a, action), b: processB(state.b, action), c: c(state.c, action) } }
总之，combineReducers()作的就是产生一个总体的 Reducer 函数。该函数根据 State 的 key 去执行相应的子 Reducer，并将返回结果合并成一个大的 State 对象。
下面是combineReducer的简单实现。
const combineReducers = reducers => { return (state = {}, action) => { return Object.keys(reducers).reduce( (nextState, key) => { nextState[key] = reducers[key](state[key], action); return nextState; }, {} ); }; };
你能够把全部子 Reducer 放在一个文件里面，而后统一引入。
import { combineReducers } from 'redux' import * as reducers from './reducers' const reducer = combineReducers(reducers)
6、工做流程
本节对 Redux 的工做流程，作一个梳理。
首先，用户发出 Action。
store.dispatch(action);
而后，Store 自动调用 Reducer，而且传入两个参数：当前 State 和收到的 Action。 Reducer 会返回新的 State 。
let nextState = todoApp(previousState, action);
State 一旦有变化，Store 就会调用监听函数。
// 设置监听函数 store.subscribe(listener);
listener能够经过store.getState()获得当前状态。若是使用的是 React，这时能够触发从新渲染 View。
function listerner() { let newState = store.getState(); component.setState(newState); }
7、实例：计数器
下面咱们来看一个最简单的实例。
const Counter = ({ value }) => ( <h1>{value}</h1> ); const render = () => { ReactDOM.render( <Counter value={store.getState()}/>, document.getElementById('root') ); }; store.subscribe(render); render();
上面是一个简单的计数器，惟一的做用就是把参数value的值，显示在网页上。Store 的监听函数设置为render，每次 State 的变化都会致使网页从新渲染。
下面加入一点变化，为Counter添加递增和递减的 Action。
const Counter = ({ value }) => ( <h1>{value}</h1> <button onClick={onIncrement}>+</button> <button onClick={onDecrement}>-</button> ); const reducer = (state = 0, action) => { switch (action.type) { case 'INCREMENT': return state + 1; case 'DECREMENT': return state - 1; default: return state; } }; const store = createStore(reducer); const render = () => { ReactDOM.render( <Counter value={store.getState()} onIncrement={() => store.dispatch({type: 'INCREMENT'})} onDecrement={() => store.dispatch({type: 'DECREMENT'})} />, document.getElementById('root') ); }; render(); store.subscribe(render);
完整的代码请看这里。
Redux 的基本用法就介绍到这里，下一次介绍它的高级用法：中间件和异步操做。