Access state and load data properly in stateless react component - reactjs

Question

I wonder how to properly load data for a stateless component using a a state value, like user id, as an argument. At the moment I try to load the data in an onEnter function but I don't seem to be able to access the state at that stage.
Is it appropriate to load the data in onEnter at all or is it expected to be done somewhere else or in a different way to be able to access the state ?
Further details about the current setup
The project is using react-router v2 and the different parts are split into separate directories, like this:
/index.js
/actions/
/components
/containers
/reducers
The index.js is creating the store that holds the state.
import React from 'react';
import ReactDOM from 'react-dom';
import {createStore, applyMiddleware} from 'redux';
import {Provider} from 'react-redux';
import thunk from 'redux-thunk';
import promiseMiddleware from 'redux-promise-middleware';
import {reactWeb} from './reducers';
import AppContainer from './containers/AppContainer';
import './css/index.css';
let middlewares = [thunk, promiseMiddleware()];
let store = createStore(reactWeb, applyMiddleware(...middlewares));
ReactDOM.render(
<Provider store={store}>
<AppContainer/>
</Provider>, document.getElementById('root'));
In the AppContainer data of the current user is loaded using onEnter and the data is stored in state as user. The callback is used to wait for the response before proceeding. In the onEnterTodos I need to get the id of the current user from state to use as an argument. And I don't know how to access the state there.
import {connect} from 'react-redux';
import App from '../components/App';
import {init} from '../actions';
import {getCurrentUser} from '../actions/profile';
import {getTodos} from '../actions/todos';
const mapStateToProps = (state) => {
return {
isLoggedIn: state.loggedIn,
redirectUrl: state.redirectUrl,
};
};
const mapDispatchToProps = (dispatch) => {
return {
onEnterApp: (nextState, replace, callback) => {
// Get user data
dispatch(getCurrentUser(nextState, callback));
callback();
},
onEnterTodos: (nextState, replace) => {
// Get todos of the user - how to get the userid
dispatch(getTodos(795558));
}
};
};
const AppContainer = connect(mapStateToProps, mapDispatchToProps)(App);
export default AppContainer;
Some claim that the routes should be returned from a function that will take the store as an argument, then one can pass the store as an argument to an onEnter function. That means moving the routing setup to the index.js and the problem for me was that the dispatch function isn't available then.
Here is by the way the component associated with the container:
import React from 'react';
import StartContainer from '../containers/StartContainer';
import TodosContainer from '../containers/TodosContainer';
import {Router, Route, browserHistory, IndexRoute, IndexRedirect} from 'react-router';
const App = ({onEnterApp, onEnterTodos}) => {
let routes = (
<Route path="/" onEnter={onEnterApp}>
<IndexRedirect to="start"/>
<Route path="start" component={StartContainer}/>
<Route path="todos" onEnter={onEnterTodos} component={TodosContainer}/>
</Route>
);
return (
<div>
<Router history={browserHistory} routes={routes}/>
</div>
)
};
App.propTypes = {};
export default App;

Answer 1

To solve this I chained the requests. So, the state is not directly accessible in the onEnter function, but in this case I could rely on the API.
The following onEnter function was changed in the AppContainer:
onEnterUsers: (nextState, replace) => {
dispatch(getEmployees());
}
Then a two new actions were created. The first one, to get info about the current user, now just returns a promise.
export const getCurrentUserPromise = (nextState, callback) => {
let headers = {
'Accept': 'application/json'
};
return apiCall('get', config.apiEndPoint + 'login/currentLogin', null, headers);
};
Finally, to get the todos I use getCurrentUserPromise and chain the request for the todos.
export const getEmployees = () => {
let headers = {
'Accept': 'application/json'
};
return dispatch => {
const payloadUser = getCurrentUserPromise()
.then(res => {
const payload = apiCall('get', config.apiEndPoint + 'todos/find?userid=' + res.userid, null, headers)
.then(res => {
return res;
});
dispatch({type: 'GET_TODOS', payload});
return res;
});
return dispatch({type: 'GET_CURRENT_USER', payloadUser});
};
};