前言
Redux的使用教程非常多，官網(wǎng)的todo就是個(gè)不錯(cuò)的例子，還有其他技術(shù)網(wǎng)站上的一些例子也很不錯(cuò)。但這些例子對(duì)于初學(xué)者來(lái)說(shuō)有些過(guò)于復(fù)雜，初學(xué)者不易理解。本文旨在利用特別簡(jiǎn)化的計(jì)數(shù)（countApp）例子來(lái)說(shuō)明Redux的思想以及在React中配合React redux的使用。
安裝
使用npm或cnpm安裝：
npm install redux --save // cnpm install redux --save
定義State
創(chuàng)建一個(gè)名為state的js文件，并添加如下代碼：
export const initState = {
count: 0,
};
這就是我們要用Redux來(lái)維護(hù)的一個(gè)初始state。
定義Actions
**Action** 是把數(shù)據(jù)從應(yīng)用（譯者注：這里之所以不叫 view 是因?yàn)檫@些數(shù)據(jù)有可能是服務(wù)器響應(yīng)，用戶輸入或其它非 view 的數(shù)據(jù) ）傳到 store 的有效載荷。它是 store 數(shù)據(jù)的**唯一**來(lái)源。一般來(lái)說(shuō)你會(huì)通過(guò) [store.dispatch()](https://www.redux.org.cn/docs/api/Store.html#dispatch) 將 action 傳到 store。
這是Redux官網(wǎng)關(guān)于Action的定義，我的理解：Action就是觸發(fā)State改變的一個(gè)（一組）動(dòng)作，想要改變State，只能通過(guò)Action去觸發(fā)（store.dispatch(action)）。
新建一個(gè)名為actions的js文件，添加如下代碼：
export const ACTION_INCREASE= 'ACTION_INCREASE';
這樣，一個(gè)Action就新建好了。
Reducer
在Action“告訴”Redux要改變State時(shí)，Action并沒(méi)有告知Redux該如何響應(yīng)數(shù)據(jù)變化，此時(shí)就該Reducer上場(chǎng)了，Reducer將定義該如何改變State。
新建一個(gè)名為reducer的js文件，并添加如下代碼：
import {ACTION_INCREASE} from './actions';
import {combineReducers} from 'redux';
import {initState} from './state';
// 計(jì)數(shù)reducer
function countNum(state = initState, action) {
switch (action.type) {
// 判斷action.type為ACTION_INCREASE時(shí)，count自加。
case ACTION_INCREASE:
return {
...state,
...state.count++,
};
default:
return state;
}
}
// 合并所有reducer
const countApp = combineReducers({
countNum,
});
export default countApp;
這樣我們就得到了一個(gè)可以改變State的Reducer。
Store
Store是聯(lián)系以上三個(gè)要素的對(duì)象，后續(xù)所有操作都要通過(guò)store來(lái)進(jìn)行。
新建一個(gè)名為store的js文件，并添加如下代碼：
import { createStore } from 'redux';
import countApp from './reducer';
let store = createStore(countApp);
export default store;
這樣就可以把store拿到組建中使用了。
組件中使用
假如我們有一個(gè)名為“Home”的組件：
import React from 'react';
function Home(props) {
return (
<div>
Home
</div>
)
}
export default Home;
我們現(xiàn)在需要在組件內(nèi)部修改Redux的State，應(yīng)該怎么做呢？看如下代碼：
import React from 'react';
import {ACTION_INCREASE} from "../../redux/actions";
import store from 'store';
function Home(props) {
return (
<div>
Home
<button onClick={() => {
// 點(diǎn)擊觸發(fā)type為ACTION_INCREASE的Action
store.dispatch({
type: ACTION_INCREASE,
});
}}>+</button>
</div>
)
}
export default Home;
點(diǎn)擊按鈕，就會(huì)觸發(fā)type為ACTION_INCREASE的 Action，然后會(huì)執(zhí)行countNum的reducer，在countNum內(nèi)部匹配到ACTION_INCREASE，就會(huì)將State中的count進(jìn)行自加。怎么能證明這一切已經(jīng)發(fā)生了呢？Redux提供了一個(gè)獲取State的方法：store.getState()。在dispatch之后，調(diào)用這個(gè)方法便可以獲取到改變后的State：
store.dispatch({
type: ACTION_INCREASE,
});
console.log(store.getState());
點(diǎn)開(kāi)控制臺(tái)，點(diǎn)擊按鈕，你應(yīng)該可以看到打印出的State。
與React結(jié)合使用
Redux的使用介紹到這兒就基本結(jié)束了，有些同學(xué)可能已經(jīng)發(fā)現(xiàn)問(wèn)題了：State應(yīng)該如何與React的組件結(jié)合呢，或者說(shuō)React組件應(yīng)該怎么使用State？這就需要借助一下React Redux的力量了。
React Redux
React Redux的connect函數(shù)能將React組件與store聯(lián)系起來(lái)，并將State作為props傳入組件。因?yàn)镽eact單向數(shù)據(jù)流的特性，dispatch后更改State相當(dāng)于修改了組件的props，從而引起視圖的更新。
首先安裝React Redux：
npm install react-redux --save // cnpm install redux --save
將store注入App組件
在App.js中修改代碼：
import {Provider} from "react-redux";
import store from './redux/store';
function App() {
return (
<Provider store={store}>
<App/>
</Provider>
);
}
Provider可以將store注入到根組件，這樣在子組件中可以很輕易地拿到State。
使用
在Home.js修改如下代碼：
import React from 'react';
import {ACTION_INCREASE} from "../../redux/actions";
import {connect} from 'react-redux';
function Home(props) {
const {countNum: {count}, dispatch} = props;
return (
<div>
Home
<button onClick={() => {
dispatch({
type: ACTION_INCREASE,
});
}}>+</button>
number: {count}
</div>
)
}
export default connect(({countNum}) => ({countNum}))(Home);
可以看到代碼發(fā)生了兩處變化：
1、store.dispatch變成了從props中獲取dispatch調(diào)用；
2、組件被connect包裹。
props中有dispatch是因?yàn)楦M件被Provider包裹，注入了dispatch；組件用connect包裹是讓Home與Redux鏈接，并傳入State。connect有兩個(gè)參數(shù)，第一個(gè)表示訂閱store，并返回一個(gè)對(duì)象；第二個(gè)參數(shù)用來(lái)建立 UI 組件的參數(shù)到store.dispatch方法的映射。也就是說(shuō)，它定義了哪些用戶的操作應(yīng)該當(dāng)作 Action，傳給 Store。它可以是一個(gè)函數(shù)，也可以是一個(gè)對(duì)象。由于我們直接在組件中使用了dispatch，故此省略第二個(gè)參數(shù)。
此例中connect傳入的參數(shù)是一個(gè)函數(shù)，接受一個(gè)state參數(shù)（我們用解構(gòu)取值State的countNum），并直接將其返回。這樣，countNum就被注入到Home的props中，當(dāng)State改變，UI也會(huì)跟著刷新。
以上就是Redux在React中的應(yīng)用。
拓展
在此例基礎(chǔ)上加一個(gè)“ACTION_DECREASE”的Action，并實(shí)現(xiàn)遞減功能。
