REACT & REDUX & ROUTER & HMR

README-redux-adn-redux.md

REACT & REDUX & ROUTER & HMR

1) Add dependency

yarn add -D redux@4.0.0 react-redux@5.0.7 redux-saga@0.16.0;
yarn add -D react-router-redux@5.0.0-alpha.9 react-router-dom@4.2.2 history@4.7.2;
yarn add -D react-hot-loader@4.1.1;
yarn upgrade-interactive;

2) Folder struct

mkdir -p src/redux src/ducks

3) Init Store

• touch src/redux/store.js
• touch src/redux/saga.js
• touch src/redux/reducer.js
• touch src/history.js

4) App (provider & hot reload)

• touch src/App.js
• touch src/index.js

App.js

// src/App.js
import React from 'react';
import {Provider} from 'react-redux';
import {ConnectedRouter} from 'react-router-redux';

import {history} from './history';
import {store} from './redux/store';
import {Root} from './components/Root';


export const App = () => <Provider store={store}>
	<ConnectedRouter history={history}>
		<Root/>
	</ConnectedRouter>
</Provider>;

history.js

// src/history.js
import createHistory from 'history/createBrowserHistory'

export const history = createHistory();

index.js

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import {App} from './App.js';  // check import path

const mountRoot = document.querySelector('#root'); // change this

if (process.env.NODE_ENV !== 'production') {
	const AppContainer = require('react-hot-loader').AppContainer;

	const render = Component => {
		ReactDOM.render(
			<AppContainer>
				<Component/>
			</AppContainer>,
			mountRoot
		);
	};

	render(App);

	if (module.hot) {
		module.hot.accept('./App.js', () => {// check import path
			render(App);
		});
	}
} else {
	ReactDOM.render(<App/>, mountRoot);
}

reducer.js

// src/redux/reducer.js
import {combineReducers} from 'redux';
import {routerReducer as router} from 'react-router-redux';

export const reducer = combineReducers({
	router
});

saga.js

// src/redux/saga.js
const sagas = [];

export const runAllSagas = middleware => sagas.forEach(saga => middleware.run(saga));

store.js

// src/redux/store.js
import {applyMiddleware, createStore} from 'redux';
import {routerMiddleware} from 'react-router-redux';
import createSagaMiddleware from 'redux-saga';

import {history} from '../history';
import {reducer} from './reducer';
import {runAllSagas} from './saga';


const sagaMiddleware = createSagaMiddleware();
const enhancer = process.env.NODE_ENV !== 'production' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
	? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__(
		applyMiddleware(sagaMiddleware, routerMiddleware(history))
	)
	: applyMiddleware(sagaMiddleware, routerMiddleware(history));
export const store = createStore(reducer, enhancer);

runAllSagas(sagaMiddleware);