webpack-contrib / webpack-hot-middleware

Webpack hot reloading you can attach to your own server

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Container can HMR,but redux can`t HMR

wd2010 opened this issue · comments

In my webpack demo, I use router4+react16 . In my container , it can replace not refresh the whole page,but when i reset my reducer, it can`t replace and not reload.
The link of the demo the link is https://github.com/wd2010/webpack-demo

##my webpack.config.js

const  ExtractTextWebpackPlugin = require("extract-text-webpack-plugin"),
  HtmlWebpackPlugin=require('html-webpack-plugin'),
  ProgressBarPlugin = require('progress-bar-webpack-plugin');
const path=require('path');
const webpack=require('webpack');
import { ReactLoadablePlugin } from 'react-loadable/webpack';
const DIR_NAME=path.join(__dirname,'../');

const config={
  context: DIR_NAME,
  entry:{
    bundle: ['./client/app.js','webpack-hot-middleware/client?path=/__webpack_hmr'],
    vendor: ['react','react-dom','redux','react-redux'],
  },
  output:{
    path:  path.resolve(DIR_NAME,'./dist/client'),
    filename: '[name].js',
    chunkFilename: 'chunk.[name].js',
    publicPath:'/'
  },

  resolve: {extensions: ['.js', '.jsx' ,'.json', '.scss']},
  module:{
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader:'babel-loader',
          options:{
            presets: ['env', 'react', 'stage-0','react-hmre'],
            plugins: ['transform-runtime', 'add-module-exports','syntax-dynamic-import','react-loadable/babel'],
            cacheDirectory: true,
          }
        }
      },{
        test: /\.html$/,
        exclude:/node_modules/,
        loader: 'html-loader'
      }
    ],
  },
  plugins:[
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    new ProgressBarPlugin({summary: false}),
    new webpack.optimize.CommonsChunkPlugin({
      names:['vendor','manifest'],
      filename:'[name].js',
    }),
    new HtmlWebpackPlugin({
      filename: '../views/dev/index.html',
      template: './views/tpl/index.html',
      chunks: ['vendor','manifest', 'bundle'],
    }),
    new ReactLoadablePlugin({
      filename: './views/dev/react-loadable.json',

    }),
  ],

}


module.exports=config

##configureStore.js

import {createStore, applyMiddleware,compose} from "redux";
import thunkMiddleware from "redux-thunk";
import createHistory from 'history/createMemoryHistory';
import {  routerReducer, routerMiddleware } from 'react-router-redux'

const routerReducers=routerMiddleware(createHistory());//路由
const composeEnhancers = !!(typeof document !== 'undefined' && window)?  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ : compose;
const middleware=[thunkMiddleware,routerReducers];

let configureStore=({initialState,rootReducer})=>createStore(rootReducer,initialState,composeEnhancers(applyMiddleware(...middleware)));


export default configureStore;

##app.js (the entry file)

import React from 'react';
import {hydrate} from 'react-dom';
import configureStore from './store/configureStore';
import createHistory from 'history/createBrowserHistory'
import createApp from './store/createApp';
import Loadable from 'react-loadable';
import rootReducer from './store/reducers/index.js';

const initialState = window.__INITIAL_STATE__;
const store=configureStore({initialState,rootReducer})
const history=createHistory()

//热加载配置
if(module.hot) {
  module.hot.accept('./store/reducers/index.js', () => {
    import('./store/reducers/index.js').then(newReducer=>{
      store.replaceReducer(newReducer)
    });
  });
}

const render=()=>{
  let application=createApp({store,history});
  hydrate(application,document.getElementById('root'))
}

window.main = () => {
  Loadable.preloadReady().then(() => {
    render()
  });
};

[HMR] connected
bundle.js:6781 [HMR] bundle rebuilding
bundle.js:6789 [HMR] bundle rebuilt in 180ms
bundle.js:7715 [HMR] Checking for updates on the server...
bundle.js:7788 [HMR] Updated modules:
bundle.js:7790 [HMR]  - ./client/store/reducers/home.js
bundle.js:7790 [HMR]  - ./client/store/reducers/index.js
bundle.js:7795 [HMR] App is up to date.
bundle.js:6781 [HMR] bundle rebuilding
bundle.js:6789 [HMR] bundle rebuilt in 195ms
bundle.js:7715 [HMR] Checking for updates on the server...
bundle.js:7788 [HMR] Updated modules:
bundle.js:7790 [HMR]  - ./client/store/reducers/home.js
bundle.js:7790 [HMR]  - ./client/store/reducers/index.js
bundle.js:7795 [HMR] App is up to date.
bundle.js:6781 [HMR] bundle rebuilding
bundle.js:6789 [HMR] bundle rebuilt in 175ms
bundle.js:7715 [HMR] Checking for updates on the server...
bundle.js:7788 [HMR] Updated modules:
bundle.js:7790 [HMR]  - ./client/store/reducers/home.js
bundle.js:7790 [HMR]  - ./client/store/reducers/index.js
bundle.js:7795 [HMR] App is up to date.

when I change the reducer,the page can`t reload
_20171210154656

Closing due to inactivity. Please test with latest version and feel free to reopen if still regressions. Thanks!