以下是应用的入口文件(main.jsx)的内容,其实现了react组件和reducer的hot reload。
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore,applyMiddleware,combineReducers } from 'redux';
import thunk from 'redux-thunk';
import { Router,hashHistory } from 'react-router';
import { syncHistoryWithStore,routerReducer } from 'react-router-redux'
const getRootReducer = () => {
var configObj = require( './redux/rootReducer.jsx' ).ReducerConfig
return combineReducers(
Object.assign(
{},configObj,// 补充处理routing信息的reducer
{ routing: routerReducer }
)
)
};
const store = createStore(
getRootReducer(),// 初始state
{
"async-items": {
items: []
}
},applyMiddleware( thunk )
);
//Create an enhanced history that syncs navigation events with the store
const history = syncHistoryWithStore( hashHistory,store );
//每次热重载,使用新的Router对象
let RouterKey = 0;
const renderApp = () => {
var routes = require( './app.jsx' ).RoutesConfig;
var provider = (
<Provider store={store}>
<Router key={RouterKey} history={history} routes={routes} />
</Provider>
);
var AppContainer = null;
try {
// 生产环境下,使用IgnorePlugin排除了对react-hot-loader代码的引入
AppContainer = require( 'react-hot-loader' ).AppContainer;
console.log( 'has AppContainer' );
} catch ( e ) { }
ReactDOM.render(
AppContainer
?
<AppContainer>
{provider}
</AppContainer>
:
provider,document.getElementById( 'root' )
);
};
if ( module.hot ) {
console.log( 'module.hot enabled' );
/*
* 热重载reducer
* rootReducer.jsx返回的是combineReducers的参数对象
* rootReducer.jsx是所有reducer的引用的入口
*/
module.hot.accept( './redux/rootReducer.jsx',() => { store.replaceReducer( getRootReducer() ); }); /* * 热重载组件 * app.jsx返回的是Router的配置对象 * app.jsx是所有react组件的引用的入口,react组件又引用了action */ module.hot.accept( './app.jsx',() => { RouterKey++; renderApp(); }) } renderApp();
原文链接:/react/304392.html