Merge pull request #667 from rackt/explicitly-use-hmr

Change examples to explicitly use replaceReducer() for hot reloading

Author: gaearon

examples/async/containers/AsyncApp.js examples/async/containers/App.js

@@ -4,7 +4,7 @@ import { selectReddit, fetchPostsIfNeeded, invalidateReddit } from '../actions';
 import Picker from '../components/Picker';
 import Posts from '../components/Posts';
 
-class AsyncApp extends Component {
+class App extends Component {
   constructor(props) {
     super(props);
     this.handleChange = this.handleChange.bind(this);
@@ -72,7 +72,7 @@ class AsyncApp extends Component {
   }
 }
 
-AsyncApp.propTypes = {
+App.propTypes = {
   selectedReddit: PropTypes.string.isRequired,
   posts: PropTypes.array.isRequired,
   isFetching: PropTypes.bool.isRequired,
@@ -99,4 +99,4 @@ function mapStateToProps(state) {
   };
 }
 
-export default connect(mapStateToProps)(AsyncApp);
+export default connect(mapStateToProps)(App);

examples/async/containers/Root.js

@@ -1,9 +1,14 @@
 import 'babel-core/polyfill';
-
 import React from 'react';
-import Root from './containers/Root';
+import { Provider } from 'react-redux';
+import App from './containers/App';
+import configureStore from './store/configureStore';
+
+const store = configureStore();
 
 React.render(
-  <Root />,
+  <Provider store={store}>
+    {() => <App />}
+  </Provider>,
   document.getElementById('root')
 );

examples/async/index.js

@@ -9,5 +9,15 @@ const createStoreWithMiddleware = applyMiddleware(
 )(createStore);
 
 export default function configureStore(initialState) {
-  return createStoreWithMiddleware(rootReducer, initialState);
+  const store = createStoreWithMiddleware(rootReducer, initialState);
+
+  if (module.hot) {
+    // Enable Webpack hot module replacement for reducers
+    module.hot.accept('../reducers', () => {
+      const nextRootReducer = require('../reducers');
+      store.replaceReducer(nextRootReducer);
+    });
+  }
+
+  return store;
 }

examples/async/store/configureStore.js

@@ -1,7 +1,13 @@
 import React from 'react';
-import Root from './containers/Root';
+import { Provider } from 'react-redux';
+import App from './containers/App';
+import configureStore from './store/configureStore';
+
+const store = configureStore();
 
 React.render(
-  <Root />,
+  <Provider store={store}>
+    {() => <App />}
+  </Provider>,
   document.getElementById('root')
 );

examples/counter/containers/CounterApp.js examples/counter/containers/App.js

@@ -1,11 +1,21 @@
 import { createStore, applyMiddleware } from 'redux';
 import thunk from 'redux-thunk';
-import rootReducer from '../reducers';
+import reducer from '../reducers';
 
 const createStoreWithMiddleware = applyMiddleware(
   thunk
 )(createStore);
 
 export default function configureStore(initialState) {
-  return createStoreWithMiddleware(rootReducer, initialState);
+  const store = createStoreWithMiddleware(reducer, initialState);
+
+  if (module.hot) {
+    // Enable Webpack hot module replacement for reducers
+    module.hot.accept('../reducers', () => {
+      const nextReducer = require('../reducers');
+      store.replaceReducer(nextReducer);
+    });
+  }
+
+  return store;
 }

examples/counter/containers/Root.js

@@ -2,7 +2,7 @@ import expect from 'expect';
 import jsdomReact from '../jsdomReact';
 import React from 'react/addons';
 import { Provider } from 'react-redux';
-import CounterApp from '../../containers/CounterApp';
+import App from '../../containers/App';
 import configureStore from '../../store/configureStore';
 
 const { TestUtils } = React.addons;
@@ -11,7 +11,7 @@ function setup(initialState) {
   const store = configureStore(initialState);
   const app = TestUtils.renderIntoDocument(
     <Provider store={store}>
-      {() => <CounterApp />}
+      {() => <App />}
     </Provider>
   );
   return {

examples/counter/index.js

@@ -1,9 +1,28 @@
 import 'babel-core/polyfill';
 import React from 'react';
-import Root from './containers/Root';
 import BrowserHistory from 'react-router/lib/BrowserHistory';
+import { Provider } from 'react-redux';
+import { Router, Route } from 'react-router';
+import configureStore from './store/configureStore';
+import App from './containers/App';
+import UserPage from './containers/UserPage';
+import RepoPage from './containers/RepoPage';
+
+const history = new BrowserHistory();
+const store = configureStore();
 
 React.render(
-  <Root history={new BrowserHistory()} />,
+  <Provider store={store}>
+    {() =>
+      <Router history={history}>
+        <Route path="/" component={App}>
+          <Route path="/:login/:name"
+                 component={RepoPage} />
+          <Route path="/:login"
+                 component={UserPage} />
+        </Route>
+      </Router>
+    }
+  </Provider>,
   document.getElementById('root')
 );

examples/counter/store/configureStore.js

@@ -4,7 +4,7 @@ import paginate from './paginate';
 import { combineReducers } from 'redux';
 
 // Updates an entity cache in response to any action with response.entities.
-export function entities(state = { users: {}, repos: {} }, action) {
+function entities(state = { users: {}, repos: {} }, action) {
   if (action.response && action.response.entities) {
     return merge({}, state, action.response.entities);
   }
@@ -13,7 +13,7 @@ export function entities(state = { users: {}, repos: {} }, action) {
 }
 
 // Updates error message to notify about the failed fetches.
-export function errorMessage(state = null, action) {
+function errorMessage(state = null, action) {
   const { type, error } = action;
 
   if (type === ActionTypes.RESET_ERROR_MESSAGE) {
@@ -26,7 +26,7 @@ export function errorMessage(state = null, action) {
 }
 
 // Updates the pagination data for different actions.
-export const pagination = combineReducers({
+const pagination = combineReducers({
   starredByUser: paginate({
     mapActionToKey: action => action.login,
     types: [
@@ -44,3 +44,11 @@ export const pagination = combineReducers({
     ]
   })
 });
+
+const rootReducer = combineReducers({
+  entities,
+  pagination,
+  errorMessage
+});
+
+export default rootReducer;

examples/counter/test/containers/CounterApp.spec.js examples/counter/test/containers/App.spec.js

@@ -1,17 +1,25 @@
-import { createStore, applyMiddleware, combineReducers } from 'redux';
+import { createStore, applyMiddleware } from 'redux';
 import thunkMiddleware from 'redux-thunk';
 import apiMiddleware from '../middleware/api';
 import loggerMiddleware from 'redux-logger';
-import * as reducers from '../reducers';
+import rootReducer from '../reducers';
 
-const reducer = combineReducers(reducers);
 const createStoreWithMiddleware = applyMiddleware(
   thunkMiddleware,
   apiMiddleware,
   loggerMiddleware
 )(createStore);
 
-// Creates a preconfigured store for this example.
 export default function configureStore(initialState) {
-  return createStoreWithMiddleware(reducer, initialState);
+  const store = createStoreWithMiddleware(rootReducer, initialState);
+
+  if (module.hot) {
+    // Enable Webpack hot module replacement for reducers
+    module.hot.accept('../reducers', () => {
+      const nextRootReducer = require('../reducers');
+      store.replaceReducer(nextRootReducer);
+    });
+  }
+
+  return store;
 }

examples/real-world/containers/Root.js

@@ -5,7 +5,7 @@ import Header from '../components/Header';
 import MainSection from '../components/MainSection';
 import * as TodoActions from '../actions/todos';
 
-class TodoApp extends Component {
+class App extends Component {
   render() {
     const { todos, dispatch } = this.props;
     const actions = bindActionCreators(TodoActions, dispatch);
@@ -19,15 +19,15 @@ class TodoApp extends Component {
   }
 }
 
-TodoApp.propTypes = {
+App.propTypes = {
   todos: PropTypes.array.isRequired,
   dispatch: PropTypes.func.isRequired
 };
 
-function select(state) {
+function mapStateToProps(state) {
   return {
     todos: state.todos
   };
 }
 
-export default connect(select)(TodoApp);
+export default connect(mapStateToProps)(App);

examples/real-world/index.js

@@ -1,10 +1,16 @@
 import 'babel-core/polyfill';
 
 import React from 'react';
-import Root from './containers/Root';
+import { Provider } from 'react-redux';
+import App from './containers/App';
+import configureStore from './store/configureStore';
 import 'todomvc-app-css/index.css';
 
+const store = configureStore();
+
 React.render(
-  <Root />,
+  <Provider store={store}>
+    {() => <App />}
+  </Provider>,
   document.getElementById('root')
 );

examples/real-world/reducers/index.js

@@ -0,0 +1,16 @@
+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');
+      store.replaceReducer(nextReducer);
+    });
+  }
+
+  return store;
+}

examples/real-world/store/configureStore.js

@@ -7,5 +7,15 @@ const createStoreWithMiddleware = applyMiddleware(
 )(createStore);
 
 export default function configureStore(initialState) {
-  return createStoreWithMiddleware(rootReducer, initialState);
+  const store = createStoreWithMiddleware(rootReducer, initialState);
+
+  if (module.hot) {
+    // Enable Webpack hot module replacement for reducers
+    module.hot.accept('../reducers', () => {
+      const nextRootReducer = require('../reducers');
+      store.replaceReducer(nextRootReducer);
+    });
+  }
+
+  return store;
 }