前言

Redux的使用教程非常多，官網(wǎng)的todo就是個不錯的例子，還有其他技術(shù)網(wǎng)站上的一些例子也很不錯。但這些例子對于初學(xué)者來說有些過于復(fù)雜，初學(xué)者不易理解。本文旨在利用特別簡化的計(jì)數(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來維護(hù)的一個初始state。

定義Actions

**Action** 是把數(shù)據(jù)從應(yīng)用（譯者注：這里之所以不叫 view 是因?yàn)檫@些數(shù)據(jù)有可能是服務(wù)器響應(yīng)，用戶輸入或其它非 view 的數(shù)據(jù) ）傳到 store 的有效載荷。它是 store 數(shù)據(jù)的**唯一**來源。一般來說你會通過 [store.dispatch()](https://www.redux.org.cn/docs/api/Store.html#dispatch) 將 action 傳到 store。
這是Redux官網(wǎng)關(guān)于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該如何響應(yīng)數(shù)據(jù)變化，此時就該Reducer上場了，Reducer將定義該如何改變State。
新建一個名為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時，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來進(jìn)行。
新建一個名為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，應(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)擊按鈕，就會觸發(fā)type為ACTION_INCREASE的 Action，然后會執(zhí)行countNum的reducer，在countNum內(nèi)部匹配到ACTION_INCREASE，就會將State中的count進(jìn)行自加。怎么能證明這一切已經(jīng)發(fā)生了呢？Redux提供了一個獲取State的方法：store.getState()。在dispatch之后，調(diào)用這個方法便可以獲取到改變后的State：

store.dispatch({
     type: ACTION_INCREASE,
});
console.log(store.getState());

點(diǎn)開控制臺，點(diǎn)擊按鈕，你應(yīng)該可以看到打印出的State。

與React結(jié)合使用

Redux的使用介紹到這兒就基本結(jié)束了，有些同學(xué)可能已經(jīng)發(fā)現(xiàn)問題了：State應(yīng)該如何與React的組件結(jié)合呢，或者說React組件應(yīng)該怎么使用State？這就需要借助一下React Redux的力量了。

React Redux

React Redux的connect函數(shù)能將React組件與store聯(lián)系起來，并將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有兩個參數(shù)，第一個表示訂閱store，并返回一個對象；第二個參數(shù)用來建立 UI 組件的參數(shù)到store.dispatch方法的映射。也就是說，它定義了哪些用戶的操作應(yīng)該當(dāng)作 Action，傳給 Store。它可以是一個函數(shù)，也可以是一個對象。由于我們直接在組件中使用了dispatch，故此省略第二個參數(shù)。
此例中connect傳入的參數(shù)是一個函數(shù)，接受一個state參數(shù)（我們用解構(gòu)取值State的countNum），并直接將其返回。這樣，countNum就被注入到Home的props中，當(dāng)State改變，UI也會跟著刷新。
以上就是Redux在React中的應(yīng)用。

拓展

在此例基礎(chǔ)上加一個“ACTION_DECREASE”的Action，并實(shí)現(xiàn)遞減功能。