前言
Redux的使用教程非常多，官網(wǎng)的todo就是個不錯的例子鹉勒，還有其他技術網(wǎng)站上的一些例子也很不錯帆锋。但這些例子對于初學者來說有些過于復雜，初學者不易理解禽额。本文旨在利用特別簡化的計數(shù)（countApp）例子來說明Redux的思想以及在React中配合React redux的使用锯厢。
安裝
使用npm或cnpm安裝：
npm install redux --save // cnpm install redux --save
定義State
創(chuàng)建一個名為state的js文件，并添加如下代碼：
export const initState = {
count: 0,
};
這就是我們要用Redux來維護的一個初始state脯倒。
定義Actions
**Action** 是把數(shù)據(jù)從應用（譯者注：這里之所以不叫 view 是因為這些數(shù)據(jù)有可能是服務器響應哲鸳，用戶輸入或其它非 view 的數(shù)據(jù) ）傳到 store 的有效載荷。它是 store 數(shù)據(jù)的**唯一**來源盔憨。一般來說你會通過 [store.dispatch()](https://www.redux.org.cn/docs/api/Store.html#dispatch) 將 action 傳到 store徙菠。
這是Redux官網(wǎng)關于Action的定義，我的理解：Action就是觸發(fā)State改變的一個（一組）動作郁岩，想要改變State婿奔，只能通過Action去觸發(fā)（store.dispatch(action)）。
新建一個名為actions的js文件问慎，添加如下代碼：
export const ACTION_INCREASE= 'ACTION_INCREASE';
這樣萍摊，一個Action就新建好了。
Reducer
在Action“告訴”Redux要改變State時如叼，Action并沒有告知Redux該如何響應數(shù)據(jù)變化冰木，此時就該Reducer上場了，Reducer將定義該如何改變State笼恰。
新建一個名為reducer的js文件踊沸，并添加如下代碼：
import {ACTION_INCREASE} from './actions';
import {combineReducers} from 'redux';
import {initState} from './state';
// 計數(shù)reducer
function countNum(state = initState, action) {
switch (action.type) {
// 判斷action.type為ACTION_INCREASE時，count自加社证。
case ACTION_INCREASE:
return {
...state,
...state.count++,
};
default:
return state;
}
}
// 合并所有reducer
const countApp = combineReducers({
countNum,
});
export default countApp;
這樣我們就得到了一個可以改變State的Reducer逼龟。
Store
Store是聯(lián)系以上三個要素的對象，后續(xù)所有操作都要通過store來進行追葡。
新建一個名為store的js文件腺律，并添加如下代碼：
import { createStore } from 'redux';
import countApp from './reducer';
let store = createStore(countApp);
export default store;
這樣就可以把store拿到組建中使用了。
組件中使用
假如我們有一個名為“Home”的組件：
import React from 'react';
function Home(props) {
return (
<div>
Home
</div>
)
}
export default Home;
我們現(xiàn)在需要在組件內(nèi)部修改Redux的State宜肉，應該怎么做呢匀钧？看如下代碼：
import React from 'react';
import {ACTION_INCREASE} from "../../redux/actions";
import store from 'store';
function Home(props) {
return (
<div>
Home
<button onClick={() => {
// 點擊觸發(fā)type為ACTION_INCREASE的Action
store.dispatch({
type: ACTION_INCREASE,
});
}}>+</button>
</div>
)
}
export default Home;
點擊按鈕，就會觸發(fā)type為ACTION_INCREASE的 Action谬返，然后會執(zhí)行countNum的reducer之斯，在countNum內(nèi)部匹配到ACTION_INCREASE，就會將State中的count進行自加朱浴。怎么能證明這一切已經(jīng)發(fā)生了呢吊圾？Redux提供了一個獲取State的方法：store.getState()。在dispatch之后翰蠢，調(diào)用這個方法便可以獲取到改變后的State：
store.dispatch({
type: ACTION_INCREASE,
});
console.log(store.getState());
點開控制臺项乒，點擊按鈕，你應該可以看到打印出的State梁沧。
與React結合使用
Redux的使用介紹到這兒就基本結束了檀何，有些同學可能已經(jīng)發(fā)現(xiàn)問題了：State應該如何與React的組件結合呢，或者說React組件應該怎么使用State廷支？這就需要借助一下React Redux的力量了频鉴。
React Redux
React Redux的connect函數(shù)能將React組件與store聯(lián)系起來，并將State作為props傳入組件恋拍。因為React單向數(shù)據(jù)流的特性垛孔，dispatch后更改State相當于修改了組件的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是因為根組件被Provider包裹讯榕，注入了dispatch；組件用connect包裹是讓Home與Redux鏈接匙睹，并傳入State愚屁。connect有兩個參數(shù)，第一個表示訂閱store痕檬，并返回一個對象集绰；第二個參數(shù)用來建立 UI 組件的參數(shù)到store.dispatch方法的映射。也就是說谆棺，它定義了哪些用戶的操作應該當作 Action栽燕，傳給 Store。它可以是一個函數(shù)改淑，也可以是一個對象碍岔。由于我們直接在組件中使用了dispatch，故此省略第二個參數(shù)朵夏。
此例中connect傳入的參數(shù)是一個函數(shù)蔼啦，接受一個state參數(shù)（我們用解構取值State的countNum），并直接將其返回仰猖。這樣捏肢，countNum就被注入到Home的props中奈籽，當State改變，UI也會跟著刷新鸵赫。
以上就是Redux在React中的應用衣屏。
拓展
在此例基礎上加一個“ACTION_DECREASE”的Action，并實現(xiàn)遞減功能辩棒。
