react and redux教程學習實踐，淺顯易懂的實踐學習方法

知識 08-03

前言

前幾天，我在博文【前端】一步一步使用webpack+react+scss腳手架重構項目中搭建了一個react開發環境。然而在實際的開發過程中，或者是在對源碼的理解中，感受到react中用的最多的，就是redux了，於是打開文檔學習了一番。在這裡做一些記錄。

redux概念

redux是什麼？它是用來管理狀態的。在react開發中，我們經常會遇到一種情況，組件與父組件之間的通信，組件與組件之間的通信，

其中組件與父組件的通信通過props來完成。

/***********parent****************/
<Number
value={this.state.number}
/>

/***********number****************/
<div >{this.props.value}</div>

number內部使用props獲取父組件自己的state，通過setState更改父組件的state.number可以實現number組件的實時更新。

那麼組件與組件之間的通信呢？例如我們有a,b兩個組件，現在a要給b轉發一個激活狀態active，一般思路是，在同一個父組件下，使用props傳遞迴調函數的方式。

/*********組件 a**********/
class A{
.....
changeActive{
this.props.changebActive;
}
render{
return <button onClick={this.changeActive}></button>
}
}
/*********組件 b**********/
class B{
render{
return <div>狀態：{this.props.active}</div>
}
}
/*********組件 parent**********/
class parent{
......
changebActive{
this.setState({
active:"開啟"
})
}
render{
return <div>
<A
changebActive={this.changebActive.bind(this)}
/>
<B
active={this.state.active}
/>
</div>
}
}

通過A點擊調用到parent的 changebActive方法，設置state更新b，這種方式非常容易使項目變得不可預測，並且state管理複雜，沒錯，redux很大程度就是用來解決這個問題的，它在react中的思想是：

將組件狀態統一放到同一個超級父組件，再由這個超級父組件用更專業的方法分發props給所有的子組件，無論嵌套多少層。由超級父組件統一管理應用中所有的state。

---這就是redux。無論api名詞如何晦澀難懂，它的核心思想是在開發中浮現的。

redux的API

一、所有的狀態，保存在一個對象裡面。

所有的狀態都保存在一個對象裡面，redux基本三大原則之一，單一數據源，一個應用所有的狀態被保存在一個對象里，這個對象通過store管理，想像一下，整個頁面的狀態被存儲在一個對象裡面，其實類似一個配置文件，你可以從伺服器讀取，可以從任何地方改變。view則是同步的，這看起來更精鍊不是么。

二、store

Store 就是保存狀態數據對象的地方，你可以把它看成一個容器。整個應用只能有一個 Store。

Redux 提供createStore這個函數，用來生成 Store。createStore傳入了一個函數這個函數將接收到兩個參數，一個state，一個action，action就是由子組件發出的更改請求，state就是那個單一的state對象。

import { createStore } from "redux";
const store = createStore(fn);

三、action

發起狀態改變的起點是action，由子組件發出action，子組件通過props調用回調函數，通知父組件發出action。

觸發：

store.dispatch(action);

四、store.dispatch

這個方法就是發出action的方法，一般傳入action，調用這個方法之後，會觸發在createStore中傳入的函數。

五、store.getState

它用來獲取當前的state對象

六、reducer

這個就是createStore中傳入的函數的名詞解釋，這個函數的執行必須返回一個新的state：

export default (state={number:0},action)=>{//每次調用都會傳入state和當前通知的action
switch(action.type){
case "NUMBER_ADD": //發過來的action如果是NUMBER_ADD 就返回number++
state.number++;
break;
case "NUMBER_LESS":
state.number--;
break;
}
return Object.assign({},state); //必須返回一個新的state ，可以使用assign合併
}

注意這裡用了es6，給state添加了一個默認值，{number：0}。

六、store.subscribe

Store 允許使用store.subscribe方法設置監聽函數，一旦 State 發生變化，就自動執行這個函數。

import { createStore } from "redux";
const store = createStore(reducer);

store.subscribe(render);

比如上面我在生成store傳入reducer函數之後，使用store.subscribe設置監聽函數為render，則每次state改變了，就會執行render函數，刷新視圖。

概念名詞太多，不如實踐

實踐一個number輸入框的加減組件，你就能大概知道redux究竟是怎麼工作的。

一、準備

首先你需要搭建一個react的開發環境，需要一個index.html 輸出目錄等。詳見我的另一篇博文：【前端】一步一步使用webpack+react+scss腳手架重構項目。

然後你需要一定的react開發實踐，React有props和state兩個屬性: props意味著父組件分發下來的屬性，state意味著組件內部可以自行管理的狀態，並且整個React沒有數據向上回溯的能力，也就是說數據只能單向向下分發，或者自行內部消化。

理解這個是理解React和Redux的前提。

你需要npm安裝redux：

num install redux react-redux --save-dev

二、代碼

1.number.js

import React,{Component} from "react";

const propTypes = {
add:React.PropTypes.func.isRequired,
less:React.PropTypes.func.isRequired,
value:React.PropTypes.object.isRequired
}
class Number extends Component{
add{
this.props.add({type:"NUMBER_ADD"}) //調用app.js中傳過來的箭頭函數，傳入了type為NUMBER_ADD的action
}
less{
this.props.less({type:"NUMBER_LESS"})
}
render{
return <div>
<input type="text" value={this.props.value.number}/>
<button onClick={this.add.bind(this)}>
+
</button>
<button onClick={this.less.bind(this)}>
-
</button>
</div>
}
}
Number.propTypes = propTypes;
export {Number};