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了，需要的同学可以自行去下载查看

实例项目地址: