block10.javascript

// index.js

// hot reloading for development env
import { AppContainer } from 'react-hot-loader';

// react dependencies
import React from 'react';
import { render } from 'react-dom';

// redux tools
import {
    createStore, // turn the reducers into stores
    combineReducers, // combineReducers to merge all different reducer's states into one object
    applyMiddleware, // incorporate redux helpers into the store pipeline
    compose // helps combine different functions into one
} from 'redux';

// helps redux handle async actions
import thunkMiddleware from 'redux-thunk';

// Component that makes the reducers and actions accessible to our application
import { Provider } from 'react-redux';

// react-router's browser history, this is different in v4
import { browserHistory } from 'react-router';

// react-router and redux helpers
import {
    syncHistoryWithStore, // keeps the browser history and synchronized
    routerReducer // provides the router as a redux reducer
} from 'react-router-redux';

// Reducers
import clientsReducer from 'reducers/clientsReducer';

// App wrapper, we will connecte it to redux next
import App from './App';

// Make the redux-dev-tools browser extension work with the app if available
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

// The app store with all middlewares and reducers available
const store = createStore(
    combineReducers({
        clientsReducer,
        routing: routerReducer
    }),
    composeEnhancers(applyMiddleware(thunkMiddleware))
);

// Browser's history synchronized with Redux
const history = syncHistoryWithStore(browserHistory, store);

// App rendering using the Provider component to enable redux
// We pass the store to the Provider and the history to the App wrapper
render(
    <Provider store={store}>
        <App history={history} />
    </Provider>,
    document.getElementById('content')
);