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

Question

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

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.
如果您以后在其他地方需要此状态,则可以使用全局状态,或混合使用这两种方法.