webpack+react+redux+es6开发模式

简介:

v一、预备知识

  node, npm, react, redux, es6, webpack

v二、学习资源

  ECMAScript 6入门

  React和Redux的连接react-redux

  Redux 入门教程   redux middleware 详解   Redux研究

  React 入门实例教程

  webpack学习demo

  NPM 使用介绍

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,参考:

    http://stackoverflow.com/questions/34039619/redux-simple-router-react-router-error-route-state-does-not-exist

  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疑问

  react-router相关API

  react-redux 之 connect 方法详解

  验证一下 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/

v八、完整项目下载

  https://github.com/hjzgg/webpack-react-redux










本文转自 小眼儿 博客园博客,原文链接:http://www.cnblogs.com/hujunzheng/p/6133648.html,如需转载请自行联系原作者
目录
相关文章
|
2月前
|
存储 JavaScript 前端开发
React中使用redux
React中使用redux
128 56
|
2月前
|
存储 JavaScript 前端开发
react redux 实现原理
【8月更文挑战第29天】react redux 实现原理
20 4
|
2月前
|
前端开发 JavaScript 开发者
React 的 ES6 语法与 ES5 相比有何不同?
【8月更文挑战第30天】
39 1
|
2月前
|
前端开发 Java UED
瞬间变身高手!JSF 与 Ajax 强强联手,打造极致用户体验的富客户端应用,让你的应用焕然一新!
【8月更文挑战第31天】JavaServer Faces (JSF) 是 Java EE 标准的一部分,常用于构建企业级 Web 应用。传统 JSF 应用采用全页面刷新方式,可能影响用户体验。通过集成 Ajax 技术,可以显著提升应用的响应速度和交互性。本文详细介绍如何在 JSF 应用中使用 Ajax 构建富客户端应用,并通过具体示例展示 Ajax 在 JSF 中的应用。首先,确保安装 JDK 和支持 Java EE 的应用服务器(如 Apache Tomcat 或 WildFly)。
33 0
|
2月前
|
存储 JavaScript 前端开发
探索React状态管理:Redux的严格与功能、MobX的简洁与直观、Context API的原生与易用——详细对比及应用案例分析
【8月更文挑战第31天】在React开发中,状态管理对于构建大型应用至关重要。本文将探讨三种主流状态管理方案:Redux、MobX和Context API。Redux采用单一存储模型,提供预测性状态更新;MobX利用装饰器语法,使状态修改更直观;Context API则允许跨组件状态共享,无需第三方库。每种方案各具特色,适用于不同场景,选择合适的工具能让React应用更加高效有序。
43 0
|
2月前
|
存储 JavaScript 前端开发
"探索Redux的Vuex化:如何在React世界中享受Vue状态管理的优雅与强大"
【8月更文挑战第21天】在现代前端开发中,状态管理至关重要。Vuex作为Vue.js的状态管理库,通过集中式存储和严格规则确保状态变更的追踪。Redux则以其在React生态中的可预测性和灵活性著称。两者都强调单一数据源、状态只读及使用纯函数变更状态。尽管API设计不同,理解Redux的核心概念——单一数据源(`store`)、状态只读与纯函数变更(`reducers`),并参考Vuex的`state`、`mutations`等,能帮助开发者快速掌握Redux,高效管理应用状态。
19 0
|
2月前
|
JavaScript 前端开发 安全
|
3月前
|
Web App开发 JavaScript 前端开发
react18【系列实用教程】搭建开发环境(2024版)Vite+React (官方推荐)(含@配置,react-developer-tools 和 Redux DevTools 下载安装)
react18【系列实用教程】搭建开发环境(2024版)Vite+React (官方推荐)(含@配置,react-developer-tools 和 Redux DevTools 下载安装)
200 0
|
5月前
|
存储 JavaScript 前端开发
基于React和Redux的待办事项列表应用
基于React和Redux的待办事项列表应用
53 0
|
5月前
|
JavaScript 前端开发 搜索推荐
构建一个基于React和Redux的简易电商购物车应用
构建一个基于React和Redux的简易电商购物车应用
55 0

热门文章

最新文章

下一篇
无影云桌面