《深入淺出React和Redux》(2)

### 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創建了Redux后，Redux已經替代了Flux，

### 基本原則
Flux的基本原則是“單向資料流”, Redux在此基礎上強調三個基本原則：
- 唯一資料源（Single Source of Truth），應用的狀態資料應該只存盤在唯一的一個Store上，它是樹形結構，每個組件往往只是用樹形物件上一部分的資料，而如何設計Store上狀態的結構，就是Redux應用的核心問題，

- 保持狀態只讀（State is read-only），不能直接修改store狀態，必須要通過派發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, 這個函式把陣列所有元素依次做“規約”，對每個元素都呼叫一次reducer，通過reducer函式完成規約所有元素的功能，

在Redux中，reducer的函式簽名為：

reducer(state, action)

它根據state和action的值產生一個新的state物件回傳，reducer是純函式，只負責計算狀態，不會去存盤狀態，

### Redux的使用
使用create-react-app創建的模版中不包含redux依賴，首先需要執行```npm install redux```安裝，

MVC中標準的單向資料流為controller->model->view的，對應地，在React配合Redux后，要觸發view的更新，需要發出一個action，然后reducer根據action來更新store的狀態，最后讓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的創建要呼叫Redux庫提供的createStore函式：
- 第一個引數為reducer，它負責更新更新狀態
- 第二個引數是狀態的初始值
- 還有第三個引數為Store Enhancer，后面再了解

確定Store狀態，是設計好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來執行對應的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 = https://www.cnblogs.com/zhixin9001/p/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上存盤的所有狀態，當前組件只需要獲取自身相關的狀態資訊；
- componentDidMount中，通過store.subscribe監聽store狀態的變化；
store狀態變化時，觸發onChange，在這里會呼叫```this.setState```觸發view更新；
- 此外還要在componentWillUnmount中取消對store狀態變化的監聽；
- 點擊button時，通過store.dispatch分發一個action，這個action由Actions.js中的某個action建構式產生，

### 容器組件和展示組件
從前文的Redux示例代碼可以發現，在Redux框架下，一個React組件基本上就是要完成以下兩個功能：
- 與store相關的職責：
  - 讀取并監聽Store狀態的改變；
  - 當Store狀態變化時，更新組件狀態，驅動組件重新渲染；
  - 當需要更新Store狀態時，派發action物件；
- 根據當前props和state，渲染出用戶界面，

于是考慮將組件一分為二：
- 容器組件：承擔store相關職責
- 展示組件：只關注頁面渲染

展示組件沒有狀態，是一個純函式，只需要根據props來渲染，不需要包含state；

### 組件Context
但是如果每個組件都拆分為容器組件和展示組件后，由于容器組件要與store打交道，那么每個容器組件都需要匯入store，最好能只在頂層的組件匯入一次，子組件就都可以用了，不過子組件使用時不是使用props層層傳遞，而是借助React提供的Context（背景關系環境），

要使用Context需要上下級組件之間的配合，首先來看頂層組件，
在此創建一個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訪問到這個共同的環境物件，就像這樣：

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來創建，我們只需撰寫展示組件部分，并定義好mapStateToProps和mapDispatchToProps，
之前在容器組件有定義getOwnState方法，將store上的狀態轉化為展示組件的props

getOwnState() {
return {
value: this.context.store.getState()[this.props.caption]
}
}

mapStateToProps也是同樣的作用：

function mapStateToProps(state, ownProps) {
return {
value: state[ownProps.caption]
}
}

容器組件還定義了點擊是分發action的函式，

onClickIncrementButton() {
this.context.store.dispatch(Actions.increment(this.props.caption));
}

onClickDecrementButton() {
this.context.store.dispatch(Actions.decrement(this.props.caption));
}

mapDispatchToProps的也是同樣的作用，將dispatch傳遞給展示組件的props，供其主動觸發：

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》 程墨

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/258010.html

標籤：JavaScript

上一篇：簡易記事本（本地應用）：vue框架筆記

下一篇：實作一個簡單的靜態博客生成器

《深入淺出React和Redux》(2) - Redux