Redux：两个组件加载相同的资源，只显示一个加载器

Question

假设我有组件FooList和DoThingWithFooModal。两者都是mountend，两者都可以从api请求foos。

foos的状态如下所示：

foos: {
  state: 'LOADING' | 'OK' | 'ERROR',
  items: [foo1, foo2, ...],
}

当foos.state为'LOADING'时，两个组件都会显示<Loader />。

我想要实现的目标是在请求的组件中显示Loader foos - 模式或列表。

（在我的具体情况下，列表隐藏在模态背后，所以它不是真正的问题。但是，我想找到解决这个问题的好方法。）

我提出的一件事是在foos州中存储更多上下文：

foos: {
  ...foos,
  requestedBy: 'DoThingWithFooModal',
}

不幸的是，这增加了更多的复杂性（1.为可能的请求者引入常量，2。决定是否显示加载器）并且看起来不太好。

还有哪些其他解决方案？

Answer 1

如果您只想要某个州是本地的，请将其设为本地！

this.setState({ isFetching: true })
this.props.fetchFoo().then(() => {
  this.setState({ isFetching: false })
})

如果您只想在单个组件中使用它，请不要在Redux中放置东西 如果您以后需要在其他地方使用此状态，则可以使用全局状态，或混合两种方法。