react中使用redux簡易案例講解
為什麼我想要使用redux？
前段時間初步上手了react，最近在使用react的過程中發現對於元件之間通訊的需求比較迫切，尤其是在axios非同步請求後端資料的時候，這樣的需求是特別強烈的！舉個例子：
// 廠家報告到貨 class ReportArrivalGoods extends React.Component{ constructor(props){ super(props); this.state = { columns:tableHead.ReportArrivalGoods,//這裡是初始化的表頭，內容較多，不顯示出來了 data: [] }; }componentDidMount(){ axios( { method: 'get', url: 'http://172.89.1.79/LogisticsSporadicBoardBackEnd/index.asmx/ReportArrivalGoods' }) .then( res => { this.setState( data:NewState ); } ) .catch( error => { console.log(error); } ); }
render(){ return( <Table style={{width: '100%'}} columns={this.state.columns} data={this.state.data} border={true} maxHeight={tableMaxHeight} /> ); } }
我們聚焦於下面的componentDidMount（）函式
componentDidMount(){ axios( { method: 'get', url: 'http://172.89.1.79/LogisticsSporadicBoardBackEnd/index.asmx/ReportArrivalGoods' }) .then( res => { this.setState( data:NewState ); } ) .catch( error => { console.log(error); } ); }這是大家都很熟悉的react生命週期鉤子函式，我做了這樣一件事：頁面渲染完向後臺請求資料並顯示到頁面上。但是用過axios的都知道，他跟ajax一樣，都是非同步的，也就說，你發處請求後就會立即執行後面的程式碼了，等你請求結果回來了才會執行then()和catch()。一開始我簡單粗暴的直接把整個函式體寫進了鉤子中，實現是沒問題了，可是要使用鉤子函式請求不同資料的元件有5個，要是每個元件都寫這麼一長串程式碼，一方面不好看，另一方面重複程式碼太多了。於是我想到了把這段函式體封裝起來，於是就有下面的程式碼
//webservice資料請求函式
function AxiosGet(desinationURL){
axios(
{
method: 'get',
url: desinationURL
})
.then(
res => {
);
}
)
.catch(
error => {
console.log(error);
}
);
}
可是要是封裝了怎麼設定我元件的state呢？機智的我想到了個辦法，在元件內部建立一個帶參函式modifyState()，在使AxiosGet（）函式時將modifyState（）函式作為引數傳入AxiosGet（）並在AxiosGet（）內部將res.data作為引數傳modifyState（）從而達到setstate的目的。說起來有點繞，用程式碼說話
//webservice資料請求函式
function AxiosGet(desinationURL,ApplyNewState){
axios(
{
method: 'get',
url: desinationURL
})
.then(
res => {
ApplyNewState(res.data);
}
)
.catch(
error => {
console.log(error);
}
);
}
上面是元件外部的資料請求函式，下面的是元件內部的鉤子函式和用於傳入獲取資料的函式
modifyState(NewState){
this.setState(
{
data:NewState
}
);
}
componentDidMount(){
AxiosGet('http://172.89.1.79/LogisticsSporadicBoardBackEnd/index.asmx/ReportArrivalGoods',
this.modifyState
);
}
恩，明眼人應該已經看懂了，我巧妙的通過在元件內部將函式傳出的方式完成了state的更新，問題雖然解決了，但是這樣操作著實麻煩，要是能在元件外部更新元件的state就好了。有人要說了，狀態提升啊！為所有的元件建立一個父元件，在父元件中統一更新狀態並通過props的形式傳入子元件。恩，這確實是個辦法，但是父元件就沒有表達出了特別的意思了，就好像div一樣，沒有語義化，有沒有更好的方式呢？百度搜搜react的state，來了來了，他來了，燈燈燈燈！redux閃亮登場！
Redux使用七步走
此處對於redux的知識不做講解了，我懂得也就那樣，redux官網上教程很清晰，可以直接過去學，我主要講講redux在react中的使用。如標題所說，只需要七步。眾所周知，在redux中，最重要的東西就三個
{
動作：action，
動作處理函式：reducer，
狀態倉庫：store
}
想必redux官方教程過了一遍的人都能輕鬆理清其中關係與具體執行吧，那麼問題來了，怎麼在react中把元件們的state和store給他繫結上呢？網上帖子一大堆，但是跟我之前那篇中說的一樣，抄來抄去，沒有真正講到小白的點子上，有的還抄錯了導致讀者誤解，這裡我從小白視角做出最貼切的講解，相信大家聽完手敲一遍也就懂了。我是用create-react-app搭建的開發環境，這裡不做贅述。話不多說，上程式碼！目錄結構如圖所示：
第一步：安裝依賴：
npm i redux redux-react -s
第二步：建立action
// /actions/test.js
export const PLUS='PLUS';
export function plusActionCreator(){
return{
type:PLUS
}
}
第三步：建立reducer
// /reducers/test.js
import {PLUS} from '../actions/test'
const initState={count:0};
export function plusReducer(state=initState,action){
switch(action.type){
case PLUS:{
return
{
count:state.count+1;//此處返回的state只是plusReducer這個小範圍內的state，理解這一點很重要！！！
}
}
default:return state;
}
}
第四步：建立store
// /index.js
const reducer=combineReducers({plus:plusReducer});//這裡需要傳入json物件才行，物件名代表來自哪個reducer var store=createStore(reducer);
上面是redux部分，大家應該很熟悉了，此時也到了最重要的部分：react和redux的結合。需要說明一下，react的元件我們現在分為展示元件和容器元件兩類，展示元件負責介面呈現，容器元件負責為展示元件管理state。展示元件的所有state通過props傳入。
第五步：建立展示元件
// /index.js
function Test (props){
return(
<div>
<p>總計數：{props.count}</p>
<button onClick={props.plus}>加一</button>
</div>
);
}
第六步：通過react-redux提供的connect方法生成容器元件
// /index.js
const CollectionComponent=connect(
(state)=>{
return{
count:state.plus.count//這裡需要注意，各個小版塊的state是通過combinereducers中命名的json物件名做了分隔的
//此處的json物件count與展示元件中的props.count是對應關係
}
},
(dispatch)=>{
return{
plus:bindActionCreators(plusActionCreator,dispatch)
//此處的json物件plus與展示元件中的props.plus方法也是對應關係
} } )(Test);//此處的Test與展示元件名也是對應關係
這裡很關鍵，首先const CollectionComponent，這個CollectionComponent就是我們所需要的容器元件。
connect（read,write）(destination)函式有三個引數read、write和destionation（抽象名，為了方便理解這麼叫）,read的目的就是從store中返回我們要的state，write的目的是傳入action來更新state，destination用來繫結到指定的展示元件。
第七步：通過react-redux提供的Provider元件搭建react和redux資料互動的橋樑
// /index.js
ReactDOM.render( <Provider store={store}>//這裡把之前建立的store傳給Provider，這樣store中的state就能傳達到容器元件中了 <CollectionComponent/>//由於第六步忠已經把展示元件繫結到了容器元件上了，所以此處只需寫容器元件即可 </Provider> ,document.getElementById('root'));
OVER！通過這個小demo即可完成一個簡單的累加器。最後貼上完整原始碼，嘿嘿嘿，yes!
// /reducers/test.js
import {PLUS} from '../actions/test'
const initState={count:0};
export function plusReducer(state=initState,action){
switch(action.type){
case PLUS:{
return {
count:state.count+1
}
}
default:return state;
}
}
// /actions/test.js
export const PLUS='PLUS';
export function plusActionCreator(){
return{
type:PLUS
}
}
// /index.js
//react
import React from 'react'
import ReactDOM from 'react-dom'
//redux
import {connect,Provider} from 'react-redux'
import {bindActionCreators,combineReducers,createStore} from 'redux'
import {plusReducer} from './reducers/test'
import {plusActionCreator} from './actions/test'
//呈現部分
function Test (props){
return(
<div>
<p>這裡是count：{props.count}</p>
<button onClick={props.plus}>加一</button>
</div>
);
}
//redux部分
const reducer=combineReducers({plus:plusReducer});//這裡需要傳入json物件才行
var store=createStore(reducer);
const CollectionComponent=connect(
(state)=>{
return{
count:state.plus.count//這裡需要注意，各個小版塊的state是
//通過combinereducers中命名的json物件名做了分隔的
}
},
(dispatch)=>{
return{
plus:bindActionCreators(plusActionCreator,dispatch)
}
}
)(Test);
ReactDOM.render(
<Provider store={store}>
<CollectionComponent/>
</Provider>
,document.getElementById('root'));
最後再給個小彩蛋吧，今天剛搗鼓的react-router的小demo，也是巢狀在上面的程式碼中的。
//react
import React from 'react'
import ReactDOM from 'react-dom'
//redux
import {connect,Provider} from 'react-redux'
import {bindActionCreators,combineReducers,createStore} from 'redux'
import {plusReducer} from './reducers/test'
import {plusActionCreator} from './actions/test'
//router
import { BrowserRouter,Switch,Route,NavLink } from 'react-router-dom';
//呈現部分
function Test (props){
return(
<div>
<p>這裡是count：{props.count}</p>
<button onClick={props.plus}>加一</button>
</div>
);
}
//redux部分
const reducer=combineReducers({plus:plusReducer});//這裡需要傳入json物件才行
var store=createStore(reducer);
const CollectionComponent=connect(
(state)=>{
return{
count:state.plus.count//這裡需要注意，各個小版塊的state是
//通過combinereducers中命名的json物件名做了分隔的
}
},
(dispatch)=>{
return{
plus:bindActionCreators(plusActionCreator,dispatch)
}
}
)(Test);
ReactDOM.render(
<Provider store={store}>
<BrowserRouter >
<Switch>
<Route path="/class/classmates">
<div>QianYingLi,HaoWu,ZhouHuiFan</div>
<NavLink to="/class" activeClassName="fillInClassNameHere">
redirect to class
</NavLink>
</Route>
<Route path="/class">
<div>高一二</div>
<NavLink to="/class/classmates" activeClassName="hurray">
redirect to classmates
</NavLink>
</Route>
<Route path="/">
<CollectionComponent/>
</Route>
</Switch>
</BrowserRouter >
</Provider>
,document.getElementById('root'));
&n