我很难在安静的大型网站中实现 Redux。
我有使用 useSelector API 连接到商店的组件 我使用 Reselect 来编写选择器。
例如,问题是我不知道在哪里触发页面的引导操作。
我有一个由无状态组件组成的容器,它只接受 Prop 并显示它们。 在容器中,可以触发所有操作以从 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;
}
这里的组件只是将它们自己“ Hook ”到商店中的数据。 如果数据已经存在,则返回它,否则触发调用 API 并返回 undefined 的操作。
我的主要疑问是这种方法是否是一种反模式,即选择器不是纯函数,因为它们会触发副作用等。
我们至少有两次重新呈现,一次未定义,另一次在 API 响应时重新呈现。
提前致谢!
最佳答案
在 Redux 官方文档中没有讨论在 reselect 内部调度,因此它不应该被认为是好的解决方案。
但是有些解决方案非常接近您想要实现的目标。例如redux-async-loader或使用 React.Lazy with Redux .
这两种方法的总体思路是将数据获取移动到 connect
函数(reselect 所在的位置)。在这个术语中,这两种方法都非常接近您通过重新选择中的调度尝试实现的目标。
在我看来,Redux-async-loader 要简单一些。它创建环绕
connect
的高阶组件。React.Lazy 本质上是一样的。此外,您还可以使用
Suspense
组件在等待数据时临时显示“数据加载...”。
关于javascript - 由选择器触发的 Redux Action ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56703319/