2016-01-07 9 views
9

Io uso Reagire + Redux + Webpack + WebpackDevserver. Una volta avviato il caricatore caldo tutti i miei riduttori vengono reimpostati allo stato iniziale.Redux - come mantenere lo stato riduttore durante il ricaricamento caldo

Posso mantenere in qualche modo i miei riduttori nello stato attuale?

mio Webpack config contiene:

entry: [ 
    "./index.jsx" 
], 
output: { 
    filename: "./bundle.js" 
}, 
module: { 
    loaders: [ 
     { 
      test: /\.js|\.jsx$/, 
      exclude: /node_modules/, 
      loaders: ["react-hot","babel-loader"], 
     } 
    ] 
}, 
plugins: [ 
    new webpack.HotModuleReplacementPlugin() 
] 

miei riduttori di statistiche con:

const initialState = { 
... 
} 

export default function config(state = initialState, action) { ... 

inizio la mia Webpack Dev-Server semplicemente:

"start": "webpack-dev-server", 

risposta

14

Supponendo Babel 6, bisogno di fare qualcosa in questo modo:

import {createStore} from 'redux'; 
import rootReducer from '../reducers'; 

export default function configureStore(initialState) { 
    const store = createStore(rootReducer, initialState); 

    if(module.hot) { 
    // Enable Webpack hot module replacement for reducers 
    module.hot.accept('../reducers',() => { 
     const nextReducer = require('../reducers/index').default; 

     store.replaceReducer(nextReducer); 
    }); 
    } 

    return store; 
} 

È possibile vedere l'approccio in azione al mio redux demo.

+1

questo sembra solo supportare la cartella di riduttori hot ricaricare, come ricaricare hot per container, component e actions? – ruandao

+3

Contenitori e componenti possono passare attraverso [react-hot-loader] (https://github.com/gaearon/react-hot-loader). È una tecnologia un po 'sperimentale, però. La domanda era limitata ai riduttori, ecco perché la risposta è limitata. –