前言
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，并实现递减功能。
