React Redux 简单的 GET Api 调用答案

【问题标题】：React Redux Simple GET Api CallReact Redux 简单的 GET Api 调用
【发布时间】：2018-06-04 14:32:33
【问题描述】：

我有一个 react 应用程序，它将使用 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 调用放在哪里以及应该如何做这件事，我感到更加困惑。我在网上阅读的所有教程都没有多大帮助，而且它们都使用相同的示例。

那么我应该如何通过带有动作/reducers/etc 的 API 加载模型的信息？以便它更新具有基本形式的 redux 存储

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

编辑：作为参考，this 是我主要关注的教程。我有身份验证工作，我只是不知道如何使其适应 DRF 中的各种其他端点。

【问题讨论】：

通常在您获得数据后，您可以调度一个将您的数据添加到商店的操作。
@Sujit.Warrier 那么我是否在更新状态后对操作进行调度调用？
actions 进行 api 调用，并将接收到的数据以对象（javascript 对象，更像是 python 中的字典）的形式处理到 reducer，该对象至少具有一个引用的 type 键必须处理数据的reducer。希望不要那么混乱。看看这个useful docs
好的，我错过了您正在进行 api 调用的一点。你用thunk或saga之类的东西吗
@cclloyd 不，您首先调度一个动作。如果您需要在此之后设置状态，请传递一个回调函数并在其中设置状态。

标签： django reactjs redux django-rest-framework

【解决方案1】：

ComponentDidMount()

componentDidMount() 在组件安装后立即调用。需要 DOM 节点的初始化应该放在这里。如果您需要从远程端点加载数据，这是一个实例化网络请求的好地方。

here

【讨论】：