browser.js

'use strict';

const NODE_ENV = process.env.NODE_ENV || 'development';

/* React and Redux stuff */
const React = require('react');
const ReactDOM = require('react-dom');
import { Provider } from 'react-redux';
import { createStore, applyMiddleware, combineReducers, compose } from 'redux';
import thunkMiddleware from 'redux-thunk';
import { routerMiddleware, routerReducer } from 'react-router-redux';

import createHistory from 'history/createBrowserHistory';
const history = createHistory();

import { createLogger } from 'redux-logger';
const loggerMiddleware = createLogger();
const middleware = routerMiddleware(history);

/**
 * My four modules.
 */
const reducersFactory = require('./reducersFactory');
const GetRouter = require('./router');
let getRoutes = require('./routes');
let state = require('./state');

/**
 * <BrowserRouter> props. In separate variable for convenience
 * https://reacttraining.com/react-router/web/api/BrowserRouter
 */
let routerConf = {
    basename: '/', // string
    getUserConfirmation: null, // func
    forceRefresh: false, // bool, full reload or not
    keyLength: 12, // num, def == 6,
}

/**
 * This is for redux-devtools-extension in Chrome console.
 * Just a useful dev feature. It has nothing to do with my app.
 * https://github.com/zalmoxisus/redux-devtools-extension
 */
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

/**
 * Create Redux store.
 * http://redux.js.org/docs/basics/Store.html
 * http://redux.js.org/docs/api/createStore.html
 */
let store = createStore(
    reducersFactory({}), // pass initial state.
    window.__state__, // important.
    // applyMiddleware(thunkMiddleware, loggerMiddleware, middleware), // if w/o redux-devtools-extension
    composeEnhancers( applyMiddleware(thunkMiddleware, loggerMiddleware, middleware) ) // if with redux-devtools-extension
);


/**
 * Assemble a final app component. To render it into a DOM node.
 */
let Application = (
    <Provider store={store}>
        <GetRouter env="browser" routes={getRoutes({})} routerConf={routerConf} />
    </Provider>
)


/**
 * Finally, render it into DOM node
 */
ReactDOM.render(Application, document.getElementById('root'));