Question

我正在将带有Reduce的Redux与React一起使用。
我有一个组件，我想从多个减速器中获取数据，但是每次我呼吁采取行动时，它都会重新呈现该组件（很明显...）

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（）是对书籍的操作。
this.props.getAuthorsNamesAsync（）是对作者的操作。
this.props.getSubscribersAsync（）是对订户的操作。

我的问题是解决该问题的最佳实践是什么？

每个动作是否都重新渲染组件是合法的？
我是否应该在一个地方编写包含所有这些动作的另一个动作？这是安静的代码复制，我希望避免它...

或其他任何选项...

Answer 1

每次状态更改时，组件都会重新渲染...您可以并且应该...这是一个旧项目的示例：

第一个动作创建者：

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

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

第二动作创建者：

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

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

并结合在一起：（请注意，它使用了lodash，但您不必... ）

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

这是一个用例，可以减少对api的调用次数，但对您的用例也是如此……

react-redux在componentDidMount上重新渲染

1 个答案: