### Redux是Flux理念的一種實現。
關于Flux理念可以通過類比MVC模式來做簡單理解。
MVC模式中，用戶請求先到達Controller，由Controller調用Model獲得數據，然后把數據交給View，按照這種模式，MVC應該也是一個controller->model->view的單向數據流，但是，在實際應用中，由于種種原因，往往會讓view直接操作Model，隨著應用的演進、邏輯變得越來約復雜，view與model之間的關系就會變得錯綜復雜、難以維護。**在MVC中讓View和Model直接對話就是災難**。
Flux理念可以簡單看作是對MVC添加了更加嚴格的數據流限制。
Flux框架隨React一同被Fackbook推出，但在Dan Abramov創(chuàng)建了Redux后，Redux已經替代了Flux。
### 基本原則
Flux的基本原則是“單向數據流”, Redux在此基礎上強調三個基本原則：
- 唯一數據源（Single Source of Truth），應用的狀態(tài)數據應該只存儲在唯一的一個Store上，它是樹形結構，每個組件往往只是用樹形對象上一部分的數據，而如何設計Store上狀態(tài)的結構，就是Redux應用的核心問題。
- 保持狀態(tài)只讀（State is read-only），不能直接修改store狀態(tài)，必須要通過派發(fā)action對象的方式來進行。
- 數據改變只能通過純函數完成（Changesare made with pure functions）。
這個純函數就是Reducer, Dan Abramov說過，Redux名字的含義就是Reducer+Flux。Reducer是一個很多語言都支持的函數，下面是js中數組的reduce函數的用法：
[1,2,3,4].reduce(function reducer(accumulation, item){
return accumulation + item;
}, 0)
reduce函數的第一個參數是reducer, 這個函數把數組所有元素依次做“規(guī)約”，對每個元素都調用一次reducer，通過reducer函數完成規(guī)約所有元素的功能。
在Redux中，reducer的函數簽名為：
reducer(state, action)
它根據state和action的值產生一個新的state對象返回，reducer是純函數，只負責計算狀態(tài)，不會去存儲狀態(tài)。
### Redux的使用
使用create-react-app創(chuàng)建的模版中不包含redux依賴，首先需要執(zhí)行```npm install redux```安裝。
MVC中標準的單向數據流為controller->model->view的，對應地，在React配合Redux后，要觸發(fā)view的更新，需要發(fā)出一個action，然后reducer根據action來更新store的狀態(tài)，最后讓view根據store中最新的數據來更新。
#### Action
Redux應用習慣上把action類型和action構造函數分成兩個文件定義，兩者的內容類似這樣：
**ActionTypes.js**
export const INCREMENT="increment";
export const DECREMENT="decrement";
**Actions.js**
這里的每個action構造函數都返回一個action對象
import * as ActionTypes from './ActionTypes.js';
export const increment = (counterCaption) => {
return {
type: ActionTypes.INCREMENT,
counterCaption: counterCaption
}
};
export const decrement = (counterCaption) => {
return {
type: ActionTypes.DECREMENT,
counterCaption: counterCaption
}
};
#### Store
**Store.js**舉例
import { createStore } from 'redux';
import reducer from './Reducer.js';
const initValues = {
'First': 0,
'Second': 10,
'Third': 20
}
const store = createStore(reducer, initValues);
export default store;
store的創(chuàng)建要調用Redux庫提供的createStore函數：
- 第一個參數為reducer，它負責更新更新狀態(tài)
- 第二個參數是狀態(tài)的初始值
- 還有第三個參數為Store Enhancer，后面再了解
確定Store狀態(tài)，是設計好Redux應用的關鍵，其主要原則是：**避免冗余的數據**；
#### Reducer
**Reducer.js**舉例
import * as ActionTypes from './ActionTypes.js';
export default (state, action) => {
const { counterCaption } = action;
switch (action.type) {
case ActionTypes.INCREMENT:
return { ...state, [counterCaption]: state[counterCaption] + 1 };
case ActionTypes.DECREMENT:
return { ...state, [counterCaption]: state[counterCaption] - 1 };
default:
return state;
}
}
Reducer的主要結構就是if-else或switch語句，根據action.type來執(zhí)行對應的reduce操作。
```...state```為擴展操作符語法，將state字段擴展開賦值給一個新的對象，再根據counterCaption修改對應的字段，這種簡化寫法等同于：
const newState = Object.assign({}, state);
newState[counterCaption]++;
return newState;
擴展操作符語法(spread operator)并不是ES6語法，但因其語法簡單而被廣泛使用，babel會負責解決兼容性問題。
reducer是純函數，不會修改原有的state，而是操作新復制的state。
### View
view代碼舉例：
import { Component } from 'react';
import PropTypes from 'prop-types';
import store from '../Store.js';
import * as Actions from '../Actions.js'
class Counter extends Component {
constructor(props) {
super(props);
/* bind methods*/
this.state = this.getOwnState();
}
getOwnState() {
return {
value: store.getState()[this.props.caption]
}
}
onChange() {
this.setState(this.getOwnState());
}
onClickIncrementButton() {
store.dispatch(Actions.increment(this.props.caption));
}
onClickDecrementButton() {
store.dispatch(Actions.decrement(this.props.caption));
}
componentDidMount() {
store.subscribe(this.onChange);
}
componentWillUnmount() {
store.unsubscribe(this.onChange);
}
render() {
const { caption } = this.props;
const value = this.state.value;
return (
<div>
<button style={buttonStyle} onClick={this.onClickIncrementButton}>+</button>
<button style={buttonStyle} onClick={this.onClickDecrementButton}>-</button>
<span>{caption} count:{value}</span>
</div>
);
}
}
- ```store.getState()```獲取store上存儲的所有狀態(tài)，當前組件只需要獲取自身相關的狀態(tài)信息；
- componentDidMount中，通過store.subscribe監(jiān)聽store狀態(tài)的變化；
store狀態(tài)變化時，觸發(fā)onChange，在這里會調用```this.setState```觸發(fā)view更新；
- 此外還要在componentWillUnmount中取消對store狀態(tài)變化的監(jiān)聽；
- 點擊button時，通過store.dispatch分發(fā)一個action，這個action由Actions.js中的某個action構造函數產生。
### 容器組件和展示組件
從前文的Redux示例代碼可以發(fā)現，在Redux框架下，一個React組件基本上就是要完成以下兩個功能：
- 與store相關的職責：
- 讀取并監(jiān)聽Store狀態(tài)的改變；
- 當Store狀態(tài)變化時，更新組件狀態(tài)，驅動組件重新渲染；
- 當需要更新Store狀態(tài)時，派發(fā)action對象；
- 根據當前props和state，渲染出用戶界面。
于是考慮將組件一分為二：
- 容器組件：承擔store相關職責
- 展示組件：只關注頁面渲染
展示組件沒有狀態(tài)，是一個純函數，只需要根據props來渲染，不需要包含state；
### 組件Context
但是如果每個組件都拆分為容器組件和展示組件后，由于容器組件要與store打交道，那么每個容器組件都需要導入store，最好能只在頂層的組件導入一次，子組件就都可以用了，不過子組件使用時不是使用props層層傳遞，而是借助React提供的Context（上下文環(huán)境）。
要使用Context需要上下級組件之間的配合，首先來看頂層組件。
在此創(chuàng)建一個Provider組件作為一個通用的Context提供者
import { Component } from 'react';
import PropTypes from 'prop-types';
class Provider extends Component {
getChildContext() {
return {
store: this.props.store
};
}
render() {
return this.props.children;
}
}
Provider.childContextTypes = {
store: PropTypes.object
}
Provider.propTypes = {
store: PropTypes.object.isRequired
}
export default Provider;
這個組件作為父組件使用：
···
import store from './Store.js';
import Provider from './Provider.js';
ReactDOM.render(
document.getElementById('root')
);
頂層的Provider組件，通過```Provider.childContextTypes```來宣稱自己支持context，并且提供```getChildContext```函數來返回代表Context的對象，Context對象中存儲的值實際上是index.js導入的store，作為props傳遞給了Provider。這樣就實現了只在index.js導入store一次。
Provider組件還會通過```this.props.children```把子組件渲染出來。
然后它子孫組件，只要宣稱自己需要這個context，就可以通過this.context訪問到這個共同的環(huán)境對象。就像這樣：
SummaryContainer.contextTypes = {
store: PropTypes.object
}
另外，構造函數也要傳遞context：
constructor(props, context) {
super(props, context);
···
}
這里可以進一步簡化為：
constructor() {
super(...arguments);
···
}
### React-Redux
以上過程從兩個方面改進了React應用：
- 把組件拆分為容器組件和展示組件
- 所有組件都通過Context來訪問store
實際上使用react-redux庫可以代替上面的大部分工作了，不過通過前面一步步的改進過程可以了解其中的原理。
引入react-redux后，代碼相比之前會更加簡潔。
首先在index.js修改為從react-redux導入Provider：
import {Provider} from 'react-redux';
在子組件中，容器組件部分也交給react-redux來創(chuàng)建，我們只需編寫展示組件部分，并定義好mapStateToProps和mapDispatchToProps。
之前在容器組件有定義getOwnState方法，將store上的狀態(tài)轉化為展示組件的props
getOwnState() {
return {
value: this.context.store.getState()[this.props.caption]
}
}
mapStateToProps也是同樣的作用：
function mapStateToProps(state, ownProps) {
return {
value: state[ownProps.caption]
}
}
容器組件還定義了點擊是分發(fā)action的函數，
onClickIncrementButton() {
this.context.store.dispatch(Actions.increment(this.props.caption));
}
onClickDecrementButton() {
this.context.store.dispatch(Actions.decrement(this.props.caption));
}
mapDispatchToProps的也是同樣的作用，將dispatch傳遞給展示組件的props，供其主動觸發(fā)：
function mapDispatchToProps(dispatch, ownProps) {
return {
onIncrement: () => {
dispatch(Actions.increment(ownProps.caption));
},
onDecrement: () => {
dispatch(Actions.decrement(ownProps.caption));
}
}
}
mapStateToProps和mapDispatchToProps會作為參數傳遞給react-redux的connect
export default connect(mapStateToProps, mapDispatchToProps)(Counter);
connect函數的運行結果還是一個函數，然后把展示組件Counter作為參數調用這個函數，這個過程就類似于之前的容器組件嵌套展示組件。
### 參考書籍
《深入淺出React和Redux》 程墨
聯(lián)系客服
