前言

Redux是迄今為止創(chuàng)建的最重要的JavaScript庫之一，靈感來源于以前的藝術(shù)比如Flux和Elm，Redux通過引入一個包含三個簡單要點的可伸縮體系結(jié)構(gòu)，使得JavaScript函數(shù)式編程成為可能。如果你是初次接觸Redux，可以考慮先閱讀官方文檔。

1. Redux大多是規(guī)約

考慮如下這個使用了Redux架構(gòu)的簡單的計數(shù)器應(yīng)用。如果你想跳過的話可以直接查看Github Repo。

1.1 State存儲在一棵樹中

該應(yīng)用程序的狀態(tài)看起來如下：

const initialState = { count: 0 };

1.2 Action聲明狀態(tài)更改

根據(jù)Redux規(guī)約，我們不直接修改(突變)狀態(tài)。

// 在Redux應(yīng)用中不要做如下操作state.count = 1;

相反，我們創(chuàng)建在應(yīng)用中用戶可能用到的所有行為。

const actions = { increment: { type: 'INCREMENT' }, decrement: { type: 'DECREMENT' }};

1.3 Reducer解釋行為并更新狀態(tài)

在最后一個架構(gòu)部分我們叫做Reduer，其作為一個純函數(shù)，它基于以前的狀態(tài)和行為返回狀態(tài)的新副本。

const countReducer = (state = initialState, action) => { switch (action.type) { case actions.increment.type:  return {  count: state.count + 1  }; case actions.decrement.type:  return {  count: state.count - 1  }; default:  return state; }};

1.4 目前為止還沒有Redux

你注意到了嗎？到目前為止我們甚至還沒有接觸到Redux庫，我們僅僅只是創(chuàng)建了一些對象和函數(shù)，這就是為什么我稱其為"大多是規(guī)約"，90%的Redux應(yīng)用其實并不需要Redux。

2. 開始實現(xiàn)Redux

要使用這種架構(gòu)，我們必須要將它放入到一個store當中，我們將僅僅實現(xiàn)一個函數(shù)：createStore。使用方式如下：

import { createStore } from 'redux'const store = createStore(countReducer);store.subscribe(() => { console.log(store.getState());});store.dispatch(actions.increment);// logs { count: 1 }store.dispatch(actions.increment);// logs { count: 2 }store.dispatch(actions.decrement);// logs { count: 1 }

下面這是我們的初始化樣板代碼，我們需要一個監(jiān)聽器列表listeners和reducer提供的初始化狀態(tài)。

const createStore = (yourReducer) => { let listeners = []; let currentState = yourReducer(undefined, {});}

無論何時某人訂閱了我們的store，那么他將會被添加到listeners數(shù)組中。這是非常重要的，因為每次當某人在派發(fā)(dispatch)一個動作(action)的時候，所有的listeners都需要在此次事件循環(huán)中被通知到。調(diào)用yourReducer函數(shù)并傳入一個undefined和一個空對象將會返回一個initialState，這個值也就是我們在調(diào)用store.getState()時的返回值。既然說到這里了，我們就來創(chuàng)建這個方法。