Skip to content

Instantly share code, notes, and snippets.

@alexfedoseev
Last active Aug 29, 2015
Embed
What would you like to do?
Redux: client initter
/* app/libs/initters/client.jsx */
import React from 'react';
import Router from 'react-router';
import BrowserHistory from 'react-router/lib/BrowserHistory';
import { combineReducers } from 'redux';
import { applyMiddleware } from 'redux';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import middleware from 'redux-thunk';
export default (params) => {
// Same as on the server, but on the client we provide initial state,
// passing `window.__DATA__` as a second argument
const reducer = combineReducers(params.reducers);
const store = applyMiddleware(middleware)(createStore)(reducer, window.__DATA__);
// History for the router
const history = new BrowserHistory();
const { routes } = params;
// This is initial rendering
let initialRender = true;
// React-router 1.0.0 gives the ability
// to customize Component's rendering
// passing custom function to `Router`s `createElement` prop
// (see `AppContainer` const below)
const appComponent = (Component, props) => {
// Passing `initialRender` flag as prop, required for @fetchData decorator
return (
<Component initialRender={initialRender} {...props} />
);
};
// Creating app container
const AppContainer = (
<Provider store={store}>
{() => <Router history={history} children={routes} createElement={appComponent} />}
</Provider>
);
// Selecting DOM container for app
const appDOMNode = document.getElementById('app');
// When app is flushed to the DOM -> setting `initialRender` to `false`
React.render(AppContainer, appDOMNode, () => initialRender = false);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment