获取数据时如何在 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.

正如主页(Lifecycle)所说，fetch 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 操作，没有更多的操作.也许我应该将处理状态保存在 state 中，然后在商店更新时呈现它们.

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.

但是怎么做呢?整个页面上的反应组件流?从其他操作更新商店会发生什么?我的意思是它们更像是事件而不是状态！

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.

在 async 在 Redux 存储库中的示例，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() 订阅商店的状态和 返回 isFetching 作为 mapStateToProps() 返回值 的一部分，因此它在连接组件的道具:

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 属性 来渲染正在加载..."标签(可以想象它可以是一个微调器):

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?

任何副作用(并且显示对话框肯定是副作用)不属于减速器.将减速器视为被动的状态构建器".他们并没有真正做"事情.

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.

对于每个规则，都有一个例外.有时您的副作用逻辑非常复杂，您实际上希望将它们耦合到特定的操作类型或特定的减速器.在这种情况下，请查看 Redux Saga 和 Redux 循环.仅当您对 vanilla Redux 感到满意并且有分散的副作用的实际问题您希望使其更易于管理时才这样做.

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屋！