Return to Answer

You can read my answer to "How to dispatch a Redux action with a timeout" for a more detailed walkthrough.

You can read my answer to "How to dispatch a Redux action with a timeout" for a more detailed walkthrough.

You can read my answer to "How to dispatch a Redux action with a timeout" for a more detailed walkthrough.

// action creator
function loadData(dispatch, userId) {
 return fetch(`http://data.com/${userId}`)
 .then(res => res.json())
 .then(
 data => dispatch({ type: 'LOAD_DATA_SUCCESS', data }),
 err => dispatch({ type: 'LOAD_DATA_FAILURE', err })
 );
}
// component
componentWillMount() {
 loadData(this.props.dispatch, this.props.userId);
}

// action creator
function loadData(userId) {
 return dispatch => fetch(`http://data.com/${userId}`)
 .then(res => res.json())
 .then(
 data => dispatch({ type: 'LOAD_DATA_SUCCESS', data }),
 err => dispatch({ type: 'LOAD_DATA_FAILURE', err })
 );
}
// component
componentWillMount() {
 this.props.dispatch(loadData(this.props.userId));
}

// action creators
function loadSomeData(dispatch, userId) {
 return fetch(`http://data.com/${userId}`)
 .then(res => res.json())
 .then(
 data => dispatch({ type: 'LOAD_SOME_DATA_SUCCESS', data }),
 err => dispatch({ type: 'LOAD_SOME_DATA_FAILURE', err })
 );
}
function loadOtherData(dispatch, userId) {
 return fetch(`http://data.com/${userId}`)
 .then(res => res.json())
 .then(
 data => dispatch({ type: 'LOAD_OTHER_DATA_SUCCESS', data }),
 err => dispatch({ type: 'LOAD_OTHER_DATA_FAILURE', err })
 );
}
function loadAllData(dispatch, userId) {
 return Promise.all(
 loadSomeData(dispatch, userId),
 loadOtherData(dispatch, userId)
 );
}
// component
componentWillMount() {
 loadAllData(this.props.dispatch, this.props.userId);
}

// action creators
function loadSomeData(userId) {
 return dispatch => fetch(`http://data.com/${userId}`)
 .then(res => res.json())
 .then(
 data => dispatch({ type: 'LOAD_SOME_DATA_SUCCESS', data }),
 err => dispatch({ type: 'LOAD_SOME_DATA_FAILURE', err })
 );
}
function loadOtherData(userId) {
 return dispatch => fetch(`http://data.com/${userId}`)
 .then(res => res.json())
 .then(
 data => dispatch({ type: 'LOAD_OTHER_DATA_SUCCESS', data }),
 err => dispatch({ type: 'LOAD_OTHER_DATA_FAILURE', err })
 );
}
function loadAllData(userId) {
 return dispatch => Promise.all(
 dispatch(loadSomeData(userId)),
 dispatch(loadOtherData(userId))
 );
}
// component
componentWillMount() {
 this.props.dispatch(loadAllData(this.props.userId));
}

function loadSomeData(userId) {
 return (dispatch, getState) => {
 if (getState().data[userId].isLoaded) {
 return Promise.resolve();
 }
 
 fetch(`http://data.com/${userId}`)
 .then(res => res.json())
 .then(
 data => dispatch({ type: 'LOAD_SOME_DATA_SUCCESS', data }),
 err => dispatch({ type: 'LOAD_SOME_DATA_FAILURE', err })
 );
 }
}

function loadSomeData(userId) {
 return {
 type: 'LOAD_SOME_DATA_SUCCESS',
 data: localStorage.getItem('my-data')
 }
}

// action creator
function loadData(dispatch, userId) { // needs to dispatch, so it is first argument
 return fetch(`http://data.com/${userId}`)
 .then(res => res.json())
 .then(
 data => dispatch({ type: 'LOAD_DATA_SUCCESS', data }),
 err => dispatch({ type: 'LOAD_DATA_FAILURE', err })
 );
}
// component
componentWillMount() {
 loadData(this.props.dispatch, this.props.userId); // don't forget to pass dispatch
}

// action creator
function loadData(userId) {
 return dispatch => fetch(`http://data.com/${userId}`) // Redux Thunk handles these
 .then(res => res.json())
 .then(
 data => dispatch({ type: 'LOAD_DATA_SUCCESS', data }),
 err => dispatch({ type: 'LOAD_DATA_FAILURE', err })
 );
}
// component
componentWillMount() {
 this.props.dispatch(loadData(this.props.userId)); // dispatch like you usually do
}

// action creators
function loadSomeData(dispatch, userId) {
 return fetch(`http://data.com/${userId}`)
 .then(res => res.json())
 .then(
 data => dispatch({ type: 'LOAD_SOME_DATA_SUCCESS', data }),
 err => dispatch({ type: 'LOAD_SOME_DATA_FAILURE', err })
 );
}
function loadOtherData(dispatch, userId) {
 return fetch(`http://data.com/${userId}`)
 .then(res => res.json())
 .then(
 data => dispatch({ type: 'LOAD_OTHER_DATA_SUCCESS', data }),
 err => dispatch({ type: 'LOAD_OTHER_DATA_FAILURE', err })
 );
}
function loadAllData(dispatch, userId) {
 return Promise.all(
 loadSomeData(dispatch, userId), // pass dispatch first: it's async
 loadOtherData(dispatch, userId) // pass dispatch first: it's async
 );
}
// component
componentWillMount() {
 loadAllData(this.props.dispatch, this.props.userId); // pass dispatch first
}

// action creators
function loadSomeData(userId) {
 return dispatch => fetch(`http://data.com/${userId}`)
 .then(res => res.json())
 .then(
 data => dispatch({ type: 'LOAD_SOME_DATA_SUCCESS', data }),
 err => dispatch({ type: 'LOAD_SOME_DATA_FAILURE', err })
 );
}
function loadOtherData(userId) {
 return dispatch => fetch(`http://data.com/${userId}`)
 .then(res => res.json())
 .then(
 data => dispatch({ type: 'LOAD_OTHER_DATA_SUCCESS', data }),
 err => dispatch({ type: 'LOAD_OTHER_DATA_FAILURE', err })
 );
}
function loadAllData(userId) {
 return dispatch => Promise.all(
 dispatch(loadSomeData(userId)), // just dispatch normally!
 dispatch(loadOtherData(userId)) // just dispatch normally!
 );
}
// component
componentWillMount() {
 this.props.dispatch(loadAllData(this.props.userId)); // just dispatch normally!
}

function loadSomeData(userId) {
 // Thanks to Redux Thunk I can use getState() here without changing callers
 return (dispatch, getState) => {
 if (getState().data[userId].isLoaded) {
 return Promise.resolve();
 }
 
 fetch(`http://data.com/${userId}`)
 .then(res => res.json())
 .then(
 data => dispatch({ type: 'LOAD_SOME_DATA_SUCCESS', data }),
 err => dispatch({ type: 'LOAD_SOME_DATA_FAILURE', err })
 );
 }
}

// I can change it to be a regular action creator without touching callers
function loadSomeData(userId) {
 return {
 type: 'LOAD_SOME_DATA_SUCCESS',
 data: localStorage.getItem('my-data')
 }
}