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。
3.编写如果文件 main.js。这里创建了provider,store,history,router。实现页面的路由以及react组件以及组件间的state交互。关于react-redux内容请参考 react-redux概念理解,关于react-router内容请参考 React Router 使用教程 。
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组件, 展示我们要演示的功能。
(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状态,重新渲染页面.
(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
FrontAndRearInteractive.js
actions/simulationRquest.js
reducers/simulationRquest.js
(2).路由注册,在routes/index.js增加如下代码。
<Route path="/frontAndRearInteractive" component={FrontAndRearInteractive} />
(3).在Home页面中点击 ‘模拟前后台交互’,即可进入页面。
v 4.页面切换
(1).在components目录新建PageExchange.js 和 Childpage.js,分别为父页面和子页面。注意,这里父页面的变量信息 是通过路由的方式传递过去的,当然也可以通过state方式传递过去。
PageExchange.js
Childpage.js
(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
ExtendPage.js
(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/