使用redux时如何在componentWillMount中加载数据

Question

I'm have trouble figuring out how to structure my code with redux. Here's the high level flow that I'm looking at:

1. An action execute successfully, and triggers history.push('/something')
2. That leads a new component Something to be loaded
3. In Something.componentWillMount() , I want to fetch some data for the component, so I call this.props.loadSomething() , which is another action

Step (3) is the problem. Since the history.push() call is in an action, redux doesn't let me call this.props.loadSomething() , since that would be calling an action within an action.

What is the proper way to handle this? I feel like this must be a very common problem, so there should be a standard approach for it.

Answer 1

What you're looking at is indeed a common scenario. The easy way around the problem is the use of a thunk.

It is basically built so that you can dispatch multiple actions simultaneously and they can even be asynchronous.

You can find relevant documentation here .

Sample usage in an app, an action creator:

export function doSomething(someParam, someOtherParam) {
  return dispatch => {
    dispatch(someOtherActionCreator(someParam));
    dispatch(loadMyDataActionCreator(someParam, someOtherParam));
  };
}

You could possibly only redirect once you've loaded the data. You can also do that with thunks.

export function fetchMeStuffNRedirect(params) {
  return dispatch => {
    return dispatch(loadSomeStuffThatReturnsPromise())
    .then(result => dispatch(doSomethingWithResult(result))
    .catch(error => dispatch(awSnapActionCreator(error));
  };
}