Redux简易教程

前言

Redux的使用教程非常多，官网的todo就是个不错的例子，还有其他技术网站上的一些例子也很不错。但这些例子对于初学者来说有些过于复杂，初学者不易理解。本文旨在利用特别简化的计数（countApp）例子来说明Redux的思想以及在React中配合React redux的使用。

安装

使用npm或cnpm安装：

npm install redux --save // cnpm install redux --save

定义State

创建一个名为state的js文件，并添加如下代码：

export const initState = {
    count: 0,
};

这就是我们要用Redux来维护的一个初始state。

定义Actions

**Action** 是把数据从应用（译者注：这里之所以不叫 view 是因为这些数据有可能是服务器响应，用户输入或其它非 view 的数据 ）传到 store 的有效载荷。它是 store 数据的**唯一**来源。一般来说你会通过 [store.dispatch()](https://www.redux.org.cn/docs/api/Store.html#dispatch) 将 action 传到 store。
这是Redux官网关于Action的定义，我的理解：Action就是触发State改变的一个（一组）动作，想要改变State，只能通过Action去触发（store.dispatch(action)）。
新建一个名为actions的js文件，添加如下代码：

export const ACTION_INCREASE= 'ACTION_INCREASE';

这样，一个Action就新建好了。

Reducer

在Action“告诉”Redux要改变State时，Action并没有告知Redux该如何响应数据变化，此时就该Reducer上场了，Reducer将定义该如何改变State。
新建一个名为reducer的js文件，并添加如下代码：

import {ACTION_INCREASE} from './actions';
import {combineReducers} from 'redux';
import {initState} from './state';

// 计数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是联系以上三个要素的对象，后续所有操作都要通过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;

我们现在需要在组件内部修改Redux的State，应该怎么做呢？看如下代码：

import React from 'react';
import {ACTION_INCREASE} from "../../redux/actions";
import store from 'store';


function Home(props) {

    return (
        <div>
            Home
            <button onClick={() => {
                // 点击触发type为ACTION_INCREASE的Action
                store.dispatch({
                    type: ACTION_INCREASE,
                });
            }}>+</button>
        </div>
    )
}

export default Home;

点击按钮，就会触发type为ACTION_INCREASE的 Action，然后会执行countNum的reducer，在countNum内部匹配到ACTION_INCREASE，就会将State中的count进行自加。怎么能证明这一切已经发生了呢？Redux提供了一个获取State的方法：store.getState()。在dispatch之后，调用这个方法便可以获取到改变后的State：

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

点开控制台，点击按钮，你应该可以看到打印出的State。

与React结合使用

Redux的使用介绍到这儿就基本结束了，有些同学可能已经发现问题了：State应该如何与React的组件结合呢，或者说React组件应该怎么使用State？这就需要借助一下React Redux的力量了。

React Redux

React Redux的connect函数能将React组件与store联系起来，并将State作为props传入组件。因为React单向数据流的特性，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);

可以看到代码发生了两处变化：
1、store.dispatch变成了从props中获取dispatch调用；
2、组件被connect包裹。
props中有dispatch是因为根组件被Provider包裹，注入了dispatch；组件用connect包裹是让Home与Redux链接，并传入State。connect有两个参数，第一个表示订阅store，并返回一个对象；第二个参数用来建立 UI 组件的参数到store.dispatch方法的映射。也就是说，它定义了哪些用户的操作应该当作 Action，传给 Store。它可以是一个函数，也可以是一个对象。由于我们直接在组件中使用了dispatch，故此省略第二个参数。
此例中connect传入的参数是一个函数，接受一个state参数（我们用解构取值State的countNum），并直接将其返回。这样，countNum就被注入到Home的props中，当State改变，UI也会跟着刷新。
以上就是Redux在React中的应用。

拓展

在此例基础上加一个“ACTION_DECREASE”的Action，并实现递减功能。