React Redux Simple GET Api Call



我有一个反应应用程序,它将使用 redux 来存储某些全局状态信息,例如 Django Rest Framework 的用户身份验证令牌和当前页面上的信息。 但是我很难弄清楚如何开始它。

目前,我将所需的组件连接到redux,当它挂载时,它会进行API调用以获取信息,如下所示...

componentDidMount() {
axios
.get("http://localhost:8000/api/spells/1")
.then(response => {
console.log('[API]:t', response);
let fields = response.data;
let spell = Object.assign({}, this.state.spell);
spell.Name =  fields.Name;
spell.School =  fields.School;
spell.Subschool =  fields.Subschool;
this.setState({
spell
});
})
.catch(function(error) {
console.error('[API]t', error);
});
}

我更困惑的是我应该在哪里放置我的 API 调用以及我应该如何做。 我在线阅读的所有教程都没有多大帮助,它们都使用相同的示例。

那么我应该如何通过API加载带有动作/化简器/等的模型信息呢?以便它更新具有基本形式的redux存储

{
other: info,
spell: {
Name: 'sdfs',
School: 'sdfs',
Subschool: 'sdfs',
}
}

编辑:作为参考,这是我主要遵循的教程。 我有身份验证工作,我只是不知道如何使其适应 DRF 中的各种其他端点。

ComponentDidMount()

componentDidMount()在挂载组件后立即调用。需要 DOM 节点的初始化应该转到此处。如果需要从远程终结点加载数据,这是实例化网络请求的好地方。

这里

最新更新