Question

我是Redux的新手所以现在请耐心等待。我的朋友建议我不要在我的componentDidMount()内部进行axios调用，而应将它们放在动作文件中。这是片段：

  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
      })
    })
  }

我理解要更改应用程序的状态，我需要调度和操作：

但问题是我真的不确定如何设置这一切。如果有人有一些提示，我会非常乐意接受它们。

Answer 1

如果在项目中使用redux

，基本上应该避免直接使用setState更新状态

这里有一个示例react-redux-axios作为参考，可以很好地理解流程。

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

Answer 2

图片说明了redux的基本架构以及redux的工作原理。 redux中有三个主要的东西：行动，减速器，商店。操作，除了调度某些数据的函数，取决于状态的变化。接下来是reducer，reducers是纯函数，没有副作用。然后是由一种存储桶组成的存储器，其中存储了所有状态变量，这有助于数据的呈现。所以现在你可以做的是在动作内部调用API，然后从ComponentDidMount调用该函数。此操作必须分派一些数据，因此您必须考虑使用redux-thunk来实现此目的，该目的用于redux中的异步调用。这可能是可以帮助你开始的非常基本的东西。您可以考虑参加this课程。据我所知，这是学习反应和减少的最佳方法。

Answer 3

您可能不需要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数据，请忽略此答案。

Answer 4

还有另一个类似Redux的库Dynadux。

您可以创建更复杂的商店，只需在componentDidMount中就可以调用store.fetchEntities()，而无需await。

Axios调用Redux操作

4 个答案: