选择器触发的Redux操作

Question

我很难在一个安静的大型网站中实施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并返回未定义的动作。

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

我们至少要进行两次重新渲染，其中一个未定义，而在API响应时进行另一个。

谢谢！

Answer 1

在Redux官方文档中没有讨论在reselect内部进行分派，因此不应将其视为很好的解决方案。

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

这两种方法的总体思路是将数据获取移至Just函数（重新选择所在的位置）。在这个学期中，这两种方法都非常接近您尝试通过重新选择调度来实现的目标。

从我的角度来看，

1. Redux-async-loader更为简单。它创建环绕Left的高阶组件。

2. React.Lazy基本上相同。另外，您可以在等待数据时使用Suspense组件来临时显示“正在加载数据”。