reactjs - react-redux 在 componentDidMount 上重新渲染

问题描述

我将 React 与 Redux 与多个减速器一起使用。
我有一个组件，我想从多个减速器中获取数据，但每次我发出号召性用语时，它都会重新渲染组件（显然......）

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() 是对订阅者的操作。

我的问题是此类问题的最佳做法是什么？

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

或任何其他选择...

标签： reactjsredux

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

第一个动作创建者：

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 的调用次数的用例，但同样适用于您的用例......

reactjs - react-redux 在 componentDidMount 上重新渲染

问题描述

解决方案

推荐阅读