score:3

Accepted answer

I believe this Stack Overflow answer is what I was looking for: Where do I fetch initial data from server in a React Redux app?

There's indeed no need for components to be involved while I'm just fetching initial state.

score:-1

I don't know what's your backend but I used to print the initial state (user data, initial config, etc.) in the HTML as a javasscript variable and the use it as the initial state for redux:

MainLayout.jsx (this runs in the back)

'use strict';
const React = require('react');
const Component = React.Component;
const PropTypes = React.PropTypes;
class MainLayout extends Component {
    render() {
        const assets = this.props.assets;
        const initialState = {
            entities: {
                users: {}
            },
            authentication: null
        };
        if (this.props.session) {
            initialState.entities.users[this.props.session.id] = this.props.session;
            initialState.authentication = {};
            initialState.authentication.id = this.props.session.id;
        }
        return (
            <html>
                <head>
                    <title>{this.props.title}</title>
                    <meta charSet="utf-8" />
                    <meta httpEquiv="X-UA-Compatible" content="IE=edge,chrome=1" />
                    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximun-scale=1.0, user-scalable=no" />
                    <link rel="stylesheet" href={assets.vendor.css} />
                    <script
                        dangerouslySetInnerHTML={{
                            __html: `window.__INITIAL_STATE__ = ${JSON.stringify(initialState)};`
                        }}
                    >
                    </script>
                </head>
                <body>
                    {this.props.children}
                    <script src={assets.vendor.js}></script>
                    {this.props.feet}
                </body>
            </html>
        );
    }
}
MainLayout.propTypes = {
    children: PropTypes.node.isRequired,
    title: PropTypes.string.isRequired,
    feet: PropTypes.object.isRequired,
    assets: PropTypes.object.isRequired,
    session: PropTypes.object
};
module.exports = MainLayout;

index.js

import React from 'react';
import { render } from 'react-dom';
import { browserHistory } from 'react-router';
import { syncHistoryWithStore } from 'react-router-redux';
import configureStore from './store';
import routes from './routes';
import App from './containers/App';

const loadauthenticationData = () => {
  if (__INITIAL_STATE__ !== null) {
    return __INITIAL_STATE__,
    };
  }
  return {};
};

const store = configureStore(loadauthenticationData());
const syncedHistory = syncHistoryWithStore(browserHistory, store);
const rootElement = document.getElementById('app');
render(
  <App
    history={syncedHistory}
    store={store}
    routes={routes}
  />,
  rootElement
);

store.js

import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import api from './middlewares/api';
import reducers from './reducers';
const middlewaresCreateStore = compose(
  applyMiddleware(thunk, api),
  window.devToolsExtension ? window.devToolsExtension() : f => f
)(createStore);
const configureStore = (initialState) => middlewaresCreateStore(
  reducers(initialState),
  initialState
);
export default configureStore;

score:2

It is best suggested to put your api calls along with other actions. https://github.com/reactjs/redux/issues/291 gives a nice explanation for the same.


Related Query

More Query from same tag