Redux on Dapeng Zhang

Webpack4+React16+ReactRouter4+Redux整合开发 - Redux Logger日志相关配置

Fri, 04 Jul 2025 14:27:37 +0000

之前的几篇文章继承了redux，这里不得不说下与redux开发相关的一些配置redux-logger，其实有很多，也有另外一种方式，这里我觉得这个是比较好的，这里做下记录，跟大家分享下。

首先clone代码

git clone https://github.com/durban89/webpack4-react16-reactrouter-demo.git redux-devtools
cd redux-devtools
npm install 

npm start

然后安装redux-logger

npm install redux-logger

打开src/index.jsx
引入redux-logger

import { createLogger } from 'redux-logger';

更新修改代码结果如下

const middleware = [];
if (typeof __DEV__ !== 'undefined') {
 middleware.push(createLogger()); // 创建日志
}
// 为了添加多个中间件 我们重新改造middleware
middleware.push(routerMiddleware(history));

// 这行是DevTools的配置 后面做详细说明
const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
 connectRouter(history)(rootReducer),
 initialState,
 composeEnhancer(applyMiddleware(...middleware)), // 中间件引入
);

日志一般是在开发环境中使用，我们需要加个变量来做下控制，这里通过修改webpack.config.js中的plugins加入

new webpack.DefinePlugin({
 'global.GENTLY': false,
 __DEV__: true,
})

配置完结果如下

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

let config = {
 entry: {
 app: [
 'webpack/hot/only-dev-server',
 'react-hot-loader/patch',
 './src/index.jsx',
 ],
 },
 plugins: [
 new CleanWebpackPlugin(['dist']),
 new HtmlWebpackPlugin({
 title: 'React + ReactRouter Demo',
 filename: './index.html', // 调用的文件
 template: './index.html', // 模板文件
 }),
 ],
 output: {
 filename: '[name].bundle.js',
 path: path.resolve(__dirname, 'dist'),
 },
 module: {
 rules: [{
 test: /\.(js|jsx)$/,
 loader: 'babel-loader',
 exclude: [
 path.resolve(__dirname, 'node_modules'),
 ],
 options: {
 plugins: ['transform-async-to-generator', 'transform-strict-mode', 'transform-object-assign', 'transform-decorators-legacy', 'react-hot-loader/babel'],
 presets: ['es2015', 'react', 'stage-0'],
 },
 },
 {
 test: /\.css$/,
 use: [
 'style-loader',
 'css-loader',
 ],
 },
 {
 test: /\.(png|svg|jpg|gif)$/,
 use: [
 'file-loader',
 ],
 },
 {
 test: /\.(woff|woff2|eot|ttf|otf)$/,
 use: [
 'file-loader',
 ],
 },
 {
 test: /\.(csv|tsv)$/,
 use: [
 'csv-loader',
 ],
 },
 {
 test: /\.xml$/,
 use: [
 'xml-loader',
 ],
 },
 ],
 },
 resolve: {
 extensions: ['.js', '.jsx'], // 这里是必须要加的，不然默认的值加载['.js','.json']为后缀的文件
 alias: {
 Actions: path.resolve(__dirname, 'src/actions'),
 },
 },
};

if (process.env.NODE_ENV === 'production') {
 config = Object.assign({}, config, {
 mode: 'production',
 });
} else {
 const {
 plugins,
 } = config;
 plugins.push(new webpack.DefinePlugin({
 'global.GENTLY': false,
 __DEV__: true,
 }));
 config = Object.assign({}, config, {
 mode: 'development',
 devtool: 'eval',
 devServer: {
 hot: true,
 contentBase: path.join(__dirname, 'dist'),
 compress: true,
 port: 8083,
 historyApiFallback: {
 rewrites: [{
 from: /^\/$/,
 to: './index.html',
 },
 ],
 },
 },
 plugins,
 });
}

module.exports = config;

重新执行

npm start

打开计数器，通过chrome的devtools可以看到类似如下图的日志，这样我们在做数据交互的时候就能清晰的了解到具体的数据调用情况

这里前提说下，Chrome浏览器最好是安装下redux的Chrome扩展，不知道的可自行百度或google下，后面的文章有需要的话，在详细说下。

实践项目地址

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

tag:v_1.0.3

Webpack4+React16+ReactRouter4+Redux整合开发 - react-hot-loader

Fri, 04 Jul 2025 14:27:34 +0000

继续上篇文章【Webpack4+React16+ReactRouter4+Redux整合开发】继续分享，这里我们针对细节的部分做下优化，主要是能更加高效的提升我们的开发效率

1、clone 实例代码并将代码运行起来

git clone https://github.com/durban89/webpack4-react16-reactrouter-demo.git react-hot-loader-demo && cd react-hot-loader-demo

npm install

2、运行项目

npm start

3、修改webpack.config.js

修改webpack-dev-server的配置，添加

hot: true

结果如下

devServer: {
 hot: true,
 contentBase: path.join(__dirname, 'dist'),
 compress: true,
 port: 8083,
 historyApiFallback: {
 rewrites: [{
 from: /^\/$/,
 to: './index.html',
 },
 ],
 },
},

修改entry

entry: {
 app: [
 'webpack/hot/only-dev-server', // 这里新加
 'react-hot-loader/patch', // 这里新加
 './src/index.jsx',
 ],
},

修改module中rule部分

{
 test: /\.(js|jsx)$/,
 loader: [
 'babel-loader',
 'react-hot-loader/webpack',
 ],
 exclude: [
 path.resolve(__dirname, 'node_modules'),
 ],
 options: {
 plugins: ['transform-async-to-generator', 'transform-strict-mode', 'transform-object-assign', 'transform-decorators-legacy'],
 presets: ['es2015', 'react', 'stage-0'],
 },
}

修改src/index.jsx
将原来的

ReactDOM.render(
 (
 <AppContainer>
 <Provider store={store}>
 <ConnectedRouter history={history}>
 {routes}
 </ConnectedRouter>
 </Provider>
 </AppContainer>
 ),
 document.getElementById('root'),
);

替换为

const render = () => {
 ReactDOM.render(
 (
 <AppContainer>
 <Provider store={store}>
 <App history={history} />
 </Provider>
 </AppContainer>
 ),
 document.getElementById('root'),
 );
};

render();

if (module.hot) {
 module.hot.addStatusHandler((status) => {
 console.log('status = ', status);
 });

 module.hot.accept('./App', () => {
 // 这里是当前版本很重要的环节，不然的话react-hot-reload不起作用
 require('./App').default;
 render();
 });

 module.hot.accept('./reducers', () => {
 store.replaceReducer(connectRouter(history)(rootReducer));
 render();
 });
}

添加src/App.jsx

import React from 'react';
import PropTypes from 'prop-types';
import { ConnectedRouter } from 'connected-react-router';
import routes from './routes';

const App = ({ history }) => (
 <ConnectedRouter history={history}>
 {routes}
 </ConnectedRouter>
);

App.propTypes = {
 history: PropTypes.objectOf(PropTypes.any).isRequired,
};

export default App;

最后一个package.json中start命令修改

"start": "npx webpack-dev-server --open --hot"

最后重启项目

npm start

试着改改UI，会有神奇的效果

实践环境具体版本以项目的package.json为准

os: mac
node: v8.9.4

项目地址
https://github.com/durban89/webpack4-react16-reactrouter-demo.git
TAG: v_1.0.2

Webpack4+React16+ReactRouter4+Redux整合开发

Fri, 04 Jul 2025 14:27:31 +0000

续接上文【Webpack4+React16+ReactRouter4整合开发】

拉取github代码
https://github.com/durban89/webpack4-react16-reactrouter-demo.git

git clone https://github.com/durban89/webpack4-react16-reactrouter-demo.git webpack4-react16-reactrouter-redux
cd webpack4-react16-reactrouter-redux
npm install 
npm start

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

首先看下react-router-redux，从react-router官网的redux介绍部分可以看出写的是React Router Redux，但是点击后会告诉你Deprecated。我的天！废弃了，好吧，然后下面告诉你connected-react-router
我的天，又造了一个轮子，看来要重头学起了，没关系，咱们就是不怕折腾，人活着就是折腾嘛。
我们链接到connected-react-router，各种的炫耀夸，太多了，各种优点，我们还是来点实际的，操作开始

npm install redux react-redux history react-hot-loader connected-react-router --save

如何使用
修改src/index.jsx

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

import { AppContainer } from 'react-hot-loader';
import { createBrowserHistory } from 'history';
import { applyMiddleware, compose, createStore } from 'redux';
import { Provider } from 'react-redux';
import { connectRouter, ConnectedRouter, routerMiddleware } from 'connected-react-router';

添加第二部分 - 需要自己去定义

import rootReducer from './reducers'; // 这里的文件是新加的 - 具体是如何创建的可以看下项目代码
import routes from './routes'; // 这里的文件是新加的 - 具体是如何创建的可以看下项目代码

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

const history = createBrowserHistory();
const initialState = {};
const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
 connectRouter(history)(rootReducer),
 initialState,
 composeEnhancer(applyMiddleware(routerMiddleware(history))),
);

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

ReactDOM.render(
 (
 <AppContainer>
 <Provider store={store}>
 <ConnectedRouter history={history}>
 {routes}
 </ConnectedRouter>
 </Provider>
 </AppContainer>
 ),
 document.getElementById('root'),
);

最终src/index.jsx内容如下

import React from 'react';
import { AppContainer } from 'react-hot-loader';
import { createBrowserHistory } from 'history';
import { applyMiddleware, compose, createStore } from 'redux';
import { Provider } from 'react-redux';
import { connectRouter, ConnectedRouter, routerMiddleware } from 'connected-react-router';
import ReactDOM from 'react-dom';
import rootReducer from './reducers';
import routes from './routes';

const history = createBrowserHistory();
const initialState = {};
const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
 connectRouter(history)(rootReducer),
 initialState,
 composeEnhancer(applyMiddleware(routerMiddleware(history))),
);

ReactDOM.render(
 (
 <AppContainer>
 <Provider store={store}>
 <ConnectedRouter history={history}>
 {routes}
 </ConnectedRouter>
 </Provider>
 </AppContainer>
 ),
 document.getElementById('root'),
);

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

import React from 'react';
import {
 BrowserRouter as Router,
 Route,
 Link as ALink,
} from 'react-router-dom';

import AppComponent from './components/AppComponent';
import HomeComponent from './components/HomeComponent';
import AboutComponent from './components/AboutComponent';
import TopicsComponent from './components/TopicsComponent';

const routes = (
 <div>
 <Router>
 <AppComponent>
 <ul>
 <li><ALink to="/">首页</ALink></li>
 <li><ALink to="/about">关于</ALink></li>
 <li><ALink to="/topics">论题</ALink></li>
 </ul>
 <hr />

 <Route exact path="/" component={HomeComponent} />
 <Route path="/about" component={AboutComponent} />
 <Route path="/topics" component={TopicsComponent} />
 </AppComponent>
 </Router>
 </div>
);

export default routes;

2、第二步
配置好了，就要开始使用了
1】、创建reducers
src/reducers/counter.js

const counterReducer = (state = 0, action) => {
 switch (action.type) {
 case 'INCREMENT':
 return state + 1;
 case 'DECREMENT':
 return state - 1;
 default:
 return state;
 }
};

export default counterReducer;

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

src/reducers/index.js // 这里的文件就是对应这段代码 import rootReducer from './reducers';
import { combineReducers } from 'redux';
import counterReducer from './counter';

export default combineReducers({
 count: counterReducer,
});

3】、创建actions


export const increment = () => ({
 type: 'INCREMENT',
});

export const decrement = () => ({
 type: 'DECREMENT',
});

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

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { counter } from 'Actions';

const {
 increment, decrement,
} = counter;

class CounterComponent extends Component {
 constructor(props, context) {
 super(props, context);

 this.state = {};
 }

 render() {
 const {
 count,
 } = this.props;

 return (
 <div>
 <p>数值: {count}</p>
 <button onClick={this.props.doIncrement}>+</button>
 <button onClick={this.props.doDecrement}>-</button>
 </div>
 );
 }
}

CounterComponent.propTypes = {
 count: PropTypes.number,
 doIncrement: PropTypes.func.isRequired,
 doDecrement: PropTypes.func.isRequired,
};

CounterComponent.defaultProps = {
 count: 0,
};

const mapStateToProps = state => ({
 count: state.count,
});

const mapDispatchToProps = dispatch => ({
 doIncrement: () => dispatch(increment()),
 doDecrement: () => dispatch(decrement()),
});

export default connect(mapStateToProps, mapDispatchToProps)(CounterComponent);

5】、将组件加到路由里面

src/routes.js

import React from 'react';
import {
 BrowserRouter as Router,
 Route,
 Link as ALink,
} from 'react-router-dom';

import AppComponent from './components/AppComponent';
import HomeComponent from './components/HomeComponent';
import AboutComponent from './components/AboutComponent';
import TopicsComponent from './components/TopicsComponent';
import CounterComponent from './components/CounterComponent';

const routes = (
 <div>
 <Router>
 <AppComponent>
 <ul>
 <li><ALink to="/">首页</ALink></li>
 <li><ALink to="/about">关于</ALink></li>
 <li><ALink to="/topics">论题</ALink></li>
 <li><ALink to="/counter">计数器</ALink></li>
 </ul>
 <hr />

 <Route exact path="/" component={HomeComponent} />
 <Route path="/about" component={AboutComponent} />
 <Route path="/topics" component={TopicsComponent} />
 <Route path="/counter" component={CounterComponent} />
 </AppComponent>
 </Router>
 </div>
);

export default routes;

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

import counter from './counter';

const actions = {
 counter,
};

export default actions;
export { counter };

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

import { counter } from 'Actions';

这里是比较特殊的
这个要归功于webpack

resolve: {
 extensions: ['.js', '.jsx'], // 这里是必须要加的，不然默认的值加载['.js','.json']为后缀的文件
 alias: {
 Actions: path.resolve(__dirname, 'src/actions'),
 },
},

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

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

实例项目地址:

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