选择器触发的 Redux 操作答案

【问题标题】：Redux actions triggered by selectors选择器触发的 Redux 操作
【发布时间】：2019-11-04 07:08:55
【问题描述】：

我很难在一个安静的大型网站中实施 Redux。

我有使用 useSelector API 连接到商店的组件我使用 Reselect 来编写选择器。

问题是我不知道在哪里触发页面的引导操作。

我有一个由无状态组件组成的容器，它只接受道具并显示它们。在容器中，可以触发所有操作以从 API 获取数据。（使用 redux-thunk）主要问题是开发人员应该列出要触发的操作以显示页面。

但我想知道在尝试从商店中选择数据时是否可以触发正确的操作：


export function getComment(state, id) {

  const comments = state.comments;

  if (comments[id]) {
    return comments[id];
  }

  store.dispatch(CommentActions.getComment(id));
  return undefined;
}

这里的组件只是将自己“挂钩”到存储中的数据。如果数据已经存在则返回，否则触发调用API的动作并返回undefined。

我的主要疑问是这种方法是否是反模式，即选择器不是纯函数，因为它们会触发副作用等。

我们至少有两次重新渲染，一次未定义，另一次在 API 响应时。

提前致谢！

【问题讨论】：

标签： javascript typescript redux

【解决方案1】：

在 Redux 官方文档中没有讨论 reselect 内部的调度，所以它不应该被认为是好的解决方案。

但有些解决方案非常接近您想要实现的目标。例如redux-async-loader 或使用React.Lazy with Redux。

这两种方法的总体思路是将数据获取移动到connect 函数（reselect 所在的函数）。在这个术语中，这两种方法都非常接近您尝试通过重新选择调度来实现的目标。

在我看来，Redux-async-loader 稍微简单一些。它创建了环绕connect 的高阶组件。
React.Lazy 的作用基本相同。另外您可以使用Suspense组件在等待数据时临时显示“数据加载中...”。

【讨论】：