redux中的store，reducer，action之间的连通关系

首先文章是基于对redux概念有了一定了解基础上，我们用代码将store，reducer，action三者连通。
要具备一定的es6语法基础
看完所有的代码片段和说明后，跟着文章最后的流程走一遍思路，差不多就理解了redux的工作流程，及其store，reducer，action三者如何在代码上连通了，（如果还不明白，建议结合文档和本文反复理解，）

我在react中给大家举例子，这是src下的项目结构：
App.js的代码如下

import React, {Component} from 'react';
import { addTwo, deTwo} from './redux/action'//引入的这两个方法是创建acation的工厂函数，文章讲到时回来看
export default class App extends Component {
//下面这两个方法可以先不看，文章讲到时可以回来看
handleAddTwo = (number) =>{
this.props.store.dispatch(addTwo(number))
};
handleDeTwo = (number) =>{
this.props.store.dispatch(deTwo(number))
};
render() {
const count = this.props.store.getState();//这是下面的初始计数，开始的时候就可以把他想成随便一个变量例如const count = 5
return (
<div>
<div>计数为{count}</div>
<div>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<button onClick={()=>{this.handleAddTwo(2)}} >+ 2</button>&nbsp;&nbsp;&nbsp;&nbsp;
<button onClick={()=>{this.handleDeTwo(2)}} >- 2</button>
</div>
</div>
);
}
}

这里想实现的效果是点+2按钮计数加2，点-2按钮计数减2；
好了那么现在开始进入redux的主题吧，
store是管理所有状态（也可以说是管理所有数据）的容器，我们首先创建这个容器，在redux文件下创建store.js里面代码如下

//创建store
//用到了redux中的createStore方法
import { createStore } from 'redux'
import { reducer } from './reducer'

export default createStore(reducer);//createStore方法会接受参数，参数是reducer函数

看完上面代码，会想到两个问题：reducer哪来的呢？创建完的store放到哪去呢？先说reducer哪来的，当然是我们创建的，在redux文件下创建reducer.js文件里面代码如下

//reducer.js
//创建了reducer两个参数分别是初始状态state并附了初始值8（这也是为什么上面效果途中的初始计数为8），第二个参数action为通过dispatch派发过来的action
export function reducer(state = 8,action) {
switch(action.type) {
case "add":
return state + action.number;
break;
case "de":
return state - action.number;
break;
default:
return state
}
}

store放到哪去呢？答案是放到最外层的组件上去，最外层组件是谁，从目录结构也能看出当然是在index文件下引入的app组件，index文件下的代码如下

//入口文件
import React from 'react';
import ReactDOM from  'react-dom';

import App from './App'
import store from './redux/store'

ReactDOM.render(<App store={store}/>, document.getElementById("root"))//放在这了，子组件就可以通过this.props.store拿到store了
//强调一点redux是管理js状态的包，当然不仅react可以用，在写前端所有的js时都可以考虑redux的概念，并引入。

上面说完了store哪里去。reducer哪里来。下面讲 action哪来的。是我们创建的，这里我是通过函数创建的形式创建action，当然也可以每次dispatch的时候大家手动写action。（在项目中建议action由工厂函数生成）
本文的redux下的action文件代码如下

//action.js代码就两行，因为举的例子比较简单
export const addTwo = (number) =>({type:"add",number:number});
//这里函数传参的number是和最开始的app.js中两个方法中的number相互对应的
export const deTwo = (number) =>({type:"de",number:number});

好了这里对redux的基本工作原理代码已经完成了，下面传通一遍工作流程。
首先当我们启动项目时app.js中的这行代码，从store中获取到了count的初始值

const count = this.props.store.getState();
//store中的getState（）方法会拿到当前store中的值
//这里大家可能想到一个问题，还没有执行reducer怎么就拿到8了呢？其实再我们用createStore（）方法创建时就执行一次reducer拿到state的初始值了

当我们点击+2按钮时会触发按钮的点击事件，触发回调函数，number值传为2，此时action工厂函数会生成一个{type:“add”,number:2}的action，通过dispatch方法传给reducer函数，reducer处理后会返回生成后的state传给store，store改变了重新渲染了app组件，改变了计数值。