Axios在Redux的动作中调用

Question

我对Redux非常陌生，请耐心等待我的翻译。我的朋友建议我不要将axios调用放在componentDidMount()里面，而是将它们放在一个action文件中。以下是代码片段：

  componentDidMount() {
    axios.get('http://xxxx/customers').then(res => {
      this.setState({
        res,
        customer: res.data
      })
    })

    axios.get('http://xxxx/events').then(res => {
      this.setState({
        res,
        event: res.data
      })
    })

    axios.get('http://xxxx/locks').then(res => {
      this.setState({
        res,
        lock: res.data
      })
    })
  }

我知道要改变应用程序的状态，需要派发一个动作(action)：

但问题是，我不确定如何设置所有这些。如果有人有一些技巧，我会非常乐意接受。

- Martin Nordström

---

看一下sagas（https://github.com/redux-saga/redux-saga），它是你问题的一个好解决方案。 - Artur Nista

如果这个人不掌握redux，那就没必要使用redux-saga。他必须理解action的工作原理。在componentDidMount中请求仍然可以（在使用saga之前，我使用API层触发我的action）。只需尝试在axios promise中派发一个action即可。 - Nevosis

Answer 1

基本上，如果您在项目中使用redux，应避免直接使用setState更新状态。这里有一个react-redux-axios的示例供参考，它将为您提供关于流程的良好理解。

https://github.com/johibkhan2/react-redux-singlePageApp

- Johib Khan

Answer 2

你可能不需要使用redux。对于简单的异步状态管理，这种模式可能会用到async/await。你可以像这样做：

async componentDidMount() {
    const res1 = await axios.get('http://34.248.65.20:3000/customers')
    const customer = res1.data

    const res2 = await axios.get('http://34.248.65.20:3000/events')
    const event = res2.data

    const res3 = await axios.get('http://34.248.65.20:3000/locks')
    const lock = res3.data

    this.setState({
        customer,
        event,
        lock
    })
}

只有在整个应用程序中需要访问此数据时，Redux 才是有用的。否则它只会增加很多样板文件。如果您确实需要在整个应用程序中访问 API 数据，请忽略此答案。

- inostia

---

这段代码按顺序执行请求，可能会使负载时间增加三倍。 - Yury Tarabanko

不，它是异步和非阻塞的。它的优越之处在于只调用一次setState而不是三次，从而消除了三次渲染。 - inostia

哦，我明白你的意思了...嗯，如果这里的请求不是按顺序进行的话，它会在不同的时间更新UI状态，但一般来说，从UI的角度来看，尽可能少地更新是更好的选择（在我看来）。 - inostia

一般来说，从用户界面的角度来看，尽可能少地更新是更好的。但这与我所说的无关。 :) 您的代码将仅在前一个请求完成后发送下一个请求。如果请求是独立的，那么这是一个坏主意，就像在这种情况下一样。使用const [customer, event, lock] = (await Promise.all(urls.map(url => axios.get(url)))).map(res => res.data)以并行方式运行请求。 - Yury Tarabanko

Answer 3

这张图片演示了 redux 的基本架构和工作原理。在 redux 中有三个主要的元素：actions、reducers、store。 Actions 就是函数，它们会分发一些数据，取决于数据的不同状态而改变状态。接下来是 reducer，reducer 是纯函数，没有副作用。然后就是 store，store 由一种桶组成，在这个桶里存储了所有你的状态变量，这有助于数据的呈现。 所以现在你可以在 actions 内部调用 API，然后从 ComponentDidMount 调用该函数。此操作必须分发一些数据，因此建议使用 redux-thunk 来处理异步调用，这是在 redux 中用于异步调用的。 这些可能是帮助你入门的非常基本的东西。你可以考虑学习 this 课程，我认为这是学习 react 和 redux 的最佳课程。

- Shubham Jain

Answer 4

有另一个类似于Redux的库，Dynadux。

你可以创建更复杂的存储，并且只需在componentDidMount中调用store.fetchEntities()而无需使用await。

- Dennis T