Webpack4+React16+ReactRouter4+Redux整合开发

续接上文【

Webpack4+React16+ReactRouter4整合开发

拉取github代码

https://github.com/durban89/webpack4-react16-reactrouter-demo.git

如果没有异常就可以正常写代码了

首先看下react-router-redux,从react-router官网的redux介绍部分可以看出写的是React Router Redux,但是点击后会告诉你Deprecated。我的天!废弃了,好吧,然后下面告诉你connected-react-router

我的天,又造了一个轮子,看来要重头学起了,没关系,咱们就是不怕折腾,人活着就是折腾嘛。

我们链接到connected-react-router,各种的炫耀夸,太多了,各种优点,我们还是来点实际的,操作开始

如何使用

修改src/index.jsx

1、第一步

添加第一部分 - 导入使用的库函数

添加第二部分 - 引入的文件需要自己去定义 后面有讲到

添加第三部分 - 配置redux相关的逻辑

添加第四部分 - 整合react-router

最终src/index.jsx内容如下

src/routes.jsx 主要配置路由跟组件的关系 -> 上面这行import routes from './routes';代码

2、第二步

配置好了,就要开始使用了

1】、创建reducers

src/reducers/counter.js

2】、将counter.js加入到主reducers里面

src/reducers/index.js // 这里的文件就是对应这段代码 import rootReducer from './reducers';

3】、创建actions -> src/actions/counter.js

4】、添加一个组件src/components/CounterComponent.jsx

5】、将组件加到路由里面src/routes.js

6】、为了引入方便再加一个src/actions/index.js

到这里基本上就完工了,应该可以在页面看到计数器,并进行操作了

这里是比较特殊的

这个要归功于webpack

这里我们加了这个配置,于是在引入的时候就会正常引入需要的代码了。

好了,整个配置就完成了,项目我已经上传到github了,需要的同学可以自行去下载查看

实例项目地址:

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180611G08RDQ00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券