如何在获取数据时在React Redux应用程序中显示加载指示器? [英] How to show a loading indicator in React Redux app while fetching the data?

问题描述

我是React/Redux的新手.我在Redux应用程序中使用fetch api中间件来处理API.它是( redux-api-middleware ).我认为这是处理异步api动作的好方法.但是我发现有些情况我自己无法解决.

I'm new to React/Redux. I use a fetch api middleware in Redux app to process the APIs. It's (redux-api-middleware). I think it's the good way to process async api actions. But I find some cases which can't be resolve by myself.

正如首页(生命周期)所述，获取API生命周期始于调度CALL_API动作以调度FSA动作结束.

As the homepage (Lifecycle) say, a fetch API lifecycle begins with dispatching a CALL_API action ends with dispatching a FSA action.

所以我的第一种情况是在获取API时显示/隐藏预加载器.中间件将在开始时调度FSA动作，在结束时调度FSA动作.这两个动作均由精简器接收，精简器仅应执行一些正常的数据处理.没有UI操作，没有更多操作.也许我应该将处理状态保存为状态，然后在商店更新时呈现它们.

So my first case is showing/hiding a preloader when fetching APIs. The middleware will dispatch a FSA action at the beginning and dispatch a FSA action at the end. Both the actions are received by reducers which should be only doing some normal data processing. No UI operations, no more operations. Maybe I should save the processing status in state then render them when store updating.

但是该怎么做呢?一个React组件流遍及整个页面吗?通过其他操作更新商店会发生什么?我的意思是，它们更像是事件而不是状态！

But how to do this? A react component flow over the whole page? what happen with store updating from other actions? I mean they are more like events than state!

即使情况更糟，当我必须在Redux/React应用程序中使用本机确认对话框或警报对话框时，该怎么办?应该将它们放在哪里，采取什么行动或减少压力?

Even a worse case, what should I do when I have to use the native confirm dialog or alert dialog in redux/react apps? Where should they be put, actions or reducers?

最良好的祝愿！希望得到答复.

Best wishes! Wish for replying.

推荐答案

我的意思是，它们更像是事件而不是状态！

I mean they are more like events than state!

我不会这么说.我认为加载指示器是UI的一个很好的例子，可以很容易地将其描述为状态函数:在这种情况下，是布尔变量.虽然此答案是正确的，但我想提供一些代码.

I would not say so. I think loading indicators are a great case of UI that is easily described as a function of state: in this case, of a boolean variable. While this answer is correct, I would like to provide some code to go along with it.

在Redux存储库中的 async 示例，reducer 更新名为 isFetching :

In the async example in Redux repo, reducer updates a field called isFetching:

case REQUEST_POSTS:
  return Object.assign({}, state, {
    isFetching: true,
    didInvalidate: false
  })
case RECEIVE_POSTS:
  return Object.assign({}, state, {
    isFetching: false,
    didInvalidate: false,
    items: action.posts,
    lastUpdated: action.receivedAt

该组件使用React Redux的 connect()订阅商店的状态，并

The component uses connect() from React Redux to subscribe to the store’s state and returns isFetching as part of the mapStateToProps() return value so it is available in the connected component’s props:

function mapStateToProps(state) {
  const { selectedReddit, postsByReddit } = state
  const {
    isFetching,
    lastUpdated,
    items: posts
  } = postsByReddit[selectedReddit] || {
    isFetching: true,
    items: []
  }

  return {
    selectedReddit,
    posts,
    isFetching,
    lastUpdated
  }
}

最后，组件使用 render()函数中的isFetching 道具，以渲染"Loading ..."标签(可以想象是微调器):

Finally, the component uses isFetching prop in the render() function to render a "Loading..." label (which could conceivably be a spinner instead):

{isEmpty
  ? (isFetching ? <h2>Loading...</h2> : <h2>Empty.</h2>)
  : <div style={{ opacity: isFetching ? 0.5 : 1 }}>
      <Posts posts={posts} />
    </div>
}

即使情况更糟，当我必须在Redux/React应用程序中使用本机确认对话框或警报对话框时，该怎么办?应该将它们放在哪里，采取什么行动或减少压力?

Even a worse case, what should I do when I have to use the native confirm dialog or alert dialog in redux/react apps? Where should they be put, actions or reducers?

任何副作用(并且显示对话框肯定是副作用)都不属于reducers.认为减速器是被动的国家建设者".他们并不是真的做"事情.

Any side effects (and showing a dialog is most certainly a side effect) do not belong in reducers. Think of reducers as passive "builders of state". They don’t really "do" things.

如果希望显示警报，请在分派动作之前从组件执行此操作，或者从动作创建者执行此操作.到分派动作时，为响应该动作而为时已晚.

If you wish to show an alert, either do this from a component before dispatching an action, or do this from an action creator. By the time an action is dispatched, it is too late to perform side effects in response to it.

对于每个规则，都有一个例外.有时，您的副作用逻辑是如此复杂，以至于您实际上想要将它们耦合到特定的动作类型或特定的reduce.在这种情况下，请查看高级项目，例如 Redux Saga 和

For every rule, there is an exception. Sometimes your side effect logic is so complicated you actually want to couple them either to specific action types or to specific reducers. In this case check out advanced projects like Redux Saga and Redux Loop. Only do this when you are comfortable with vanilla Redux and have a real problem of scattered side effects you’d like to make more manageable.

这篇关于如何在获取数据时在React Redux应用程序中显示加载指示器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！