v一、预备知识
node, npm, react, redux, es6, webpack
v二、学习资源
Redux 入门教程 redux middleware 详解 Redux研究
v三、工程搭建
之前有写过 webpack+react+es6开发模式 ，文章里介绍了一些简单的配置，欢迎访问。后续文章请参考 webpack+react+redux+es6开发模式---续。
1.可以npm init, 创建一个新的工程。创建package.json文件，定义需要的dependency，scripts，version等等。
2.新增webpack.config.json文件，定义插件项配置，页面入口文件，文件输出，加载器的配置，其他解决方案配置等。下面提供了简单配置的demo，更详细的讲解，请参考 webpack 入门指南: w2bc.com/Article/50764。
View Code
3.编写如果文件 main.js。这里创建了provider，store，history，router。实现页面的路由以及react组件以及组件间的state交互。关于react-redux内容请参考 react-redux概念理解，关于react-router内容请参考 React Router 使用教程 。
View Code
4.创建工程的各个模块
|--demo1
|--src //源码
|--actions // 存放当前触发Redux的动作行为
|--components // 存放工程内部的公共组件
|--modules // 存放工程各模块代码
|--constants // action动作常量
|--reducers // 存放reducer函数，用来修改store状态
|--routes // 放置页面路由 react router
|--stores // 放置stores配置文件
|--main.js // 入口js
|--index.html // 工程入口文件html
|--node_modules // 存放依赖的第三方模块库,使用命令 npm install
|--build //打包文件存放的目录
|--webpack.config.js
|--package.json
v四、功能开发
v 1.做一个简单的Home页面
(1).在modules文件夹新建Home.js, 使用antd 的Menu组件, 展示我们要演示的功能。
View Code
(2).注册Home页面的路由，对应routes/index.js加入如下代码。
<Route path="/" component={ModuleRouters}>
<IndexRoute component={Home} />
</Route>
(3).启动工程， npm run dev, 浏览器中输入 http://localhost:8000/demo1，即可预览我们的Home页面。
v 2.单页面渲染，完成数据的展示和隐藏
(1).在component目录下新建ShowSelfMsg.js, 通过改变state状态，重新渲染页面.
View Code
(2).注册路由，在routes/index.js中加入如下代码。
<Route path="/showSelfMsg" component={ShowSelfMsg} />
(3).在Home页面中点击 ‘页面渲染展示信息’，即可进入这个页面。
v 3.模拟前后台交互
(1).代码编写如下。
(I).在constants新建ActoinTypesjs，定动作类型；
(II).在actions目录中新建simulationRquest.js, 定义要分发的动作；
(III)在reducers目录新建simulationRquest.js，存放reducer函数，用来修改store状态，然后将该函数放入到reducers/index.js中的combineReducers函数中,最终会合并成一个新的reducer；
(IV)components目录中新建FrontAndRearInteractive.js, dispatch 自定义的动作，实现模拟前后台交互功能。
ActionType.js
View Code
FrontAndRearInteractive.js
View Code
actions/simulationRquest.js
View Code
reducers/simulationRquest.js
View Code
(2).路由注册，在routes/index.js增加如下代码。
<Route path="/frontAndRearInteractive" component={FrontAndRearInteractive} />
(3).在Home页面中点击 ‘模拟前后台交互’，即可进入页面。
v 4.页面切换
(1).在components目录新建PageExchange.js 和 Childpage.js，分别为父页面和子页面。注意，这里父页面的变量信息 是通过路由的方式传递过去的，当然也可以通过state方式传递过去。
PageExchange.js
View Code
Childpage.js
View Code
(2).注册路由，在routes/index.js中加入如下代码。
<Route path="/pageExchange" component={PageExchange} />
<Route path="/childDemoPage(/:parentPageMsg)" component={ChildPage}/>
(3).在Home页面中点击‘页面切换’，即可进入页面。
v 5.自定义扩展组件
(1).先说一下应用场景：多个页面可能需要类似的扩展功能，通过自定义扩展组件，完成对信息的加载。主页面信息保存时，通知扩展组件要保存信息了，扩展组件将最新修改的信息告知主页面，主页面获取到全部信息后，一起将数据传给后台，完成主页面信息和扩展信息的保存。
(2).在components目录下新建Page.js和ExtendPage.js，分别为主页面和自定义扩展组件。
Page.js
View Code
ExtendPage.js
View Code
(3).说一下组件的扩展机制
(I).扩展组件自身会维护更新自己state状态，在触发扩展组件保存时，扩展组件将自身数据通过dispatch进行分发，最后通过对应的reducer(这个reducer会通过combineReducers函数合并成一个新的reducer)进行处理，根据逻辑生成新的state。
>>定义动作类型
>>分发动作
>>reducer处理动作，返回新的state
>>自定义的reducer函数通过combineReducers函数进行合并
(II).父级组件如何获取扩展组件的状态？
也就是store中的状态树变化的时候，组件可以通过 mapStateToProps 函数从状态树中获取最新的state。
(III).父级组件如何通知扩展组件 准备保存数据了？
>>扩展组件接收父级组件两个参数：childState, 通知扩展组件状态发生变化; callBack, 修改childState状态，扩张组件通知父级组件更新完成。
>>父级组件保存数据时，首先获取到自己的数据，然后通过setState()方法改变childState的值，通知扩展组件。最后通过setState方法传入的回调函数（该函数在组件更新完成之后调用）获取到扩展组件的最新state。
>>扩展组件接收到父级组件的通知，刷新store中的state。这样父级组件和扩展组件自身都可以通过mapStateToProps方法获取到最新的state。
(4).注册路由，在routes/index.js中加入如下代码。
(5).在Home页面中点击‘页面切换’，即可进入页面。
v 五、问题解惑
1.module.filename、__filename、__dirname、process.cwd(): http://www.tuicool.com/articles/bQre2a
2.node.js之path模块: http://www.jianshu.com/p/fe41ee02efc8
3.react-router: http://www.ruanyifeng.com/blog/2016/05/react_router.html?utm_source=tool.lu
4.出现如下错误：Cannot sync router: route state does not exist. Did you install the routing reducer，参考：
5.module.exprots, export, export default区别：
export default variation import variation from 'js file' export variation import {variation} from 'js file' module.exports=variation import variation from 'js file'
参考：
http://www.2cto.com/kf/201412/360211.html
http://www.jb51.net/article/33269.htm
http://blog.csdn.net/zhou_xiao_cheng/article/details/52759632
http://blog.csdn.net/zhou_xiao_cheng/article/details/52759632
v六、dispath疑问
验证一下 redux store.dispatch 和 react组件 props中的dispath，的确是一样的。
dispath:function (action) { return typeof action === 'function' ? action(dispatch, getState) : next(action); }
v七、演示地址
http://study.hujunzheng.cn:8000/DEMO_FRONT/
