react-redux 在 componentDidMount 上重新渲染

Question

I'm using React with Redux with multiple reducers.
I have a component in which I want to fetch data from multiple reducers but each time I make a call to action it re-renders the component (obviously...)

async componentDidMount() {
  await this.props.getBooksNamesAsync();
  await this.props.getAuthorsNamesAsync();
  await this.props.getSubscribersAsync();

  this.props.setFilter(
    this.props.book.bookNames,
    this.props.author.authorNames,
    this.props.subscriber.subscriberNames
  );
}

• this.props.getBooksNamesAsync() is action on book.
• this.props.getAuthorsNamesAsync() is action on author.
• this.props.getSubscribersAsync() is action on subscriber.

my question is what the best practice for such issue ?

• Is re-rendering the component every action is legitimate ?
• Should I write another action that contains all these actions in one place ? which is quiet code duplication and I prefer to avoid it...

or any other options...

Answer 1

The component rerenders every time there is state change... You can and you should... Here is an example from an old project:

First action creator:

export const fetchPosts = () => async (dispatch) => {
  const response = await axios.get('/posts');

  dispatch({ type: 'FETCH_POSTS', payload: response.data });
};

Second action creator:

export const fetchUser = id => async dispatch => {
  const response = await axios.get(`/users/${id}`);

  dispatch({ type: 'FETCH_USER', payload: response.data });
};

And both combined: ( note, it's making use of lodash but you do not have to... )

export const fetchPostsAnUsers = () => async (dispatch, getState) => {
  await dispatch(fetchPosts());
  const userIds = uniq(map(getState().posts, 'userId'));
  userIds.forEach(id => dispatch(fetchUser(id)));
};

This was a use case to cut down on the number of calls made to the api but the same holds true for your use case...