使用 axios 调用 API 时如何防止 UI 冻结

Question

当我的组件使用componentDidMount 加载时，我正在尝试加载数据。但是调用 Redux 操作，使用 axios 进行调用似乎会冻结 UI。当我有一个包含 12 个输入的表单并且一个进行 API 调用时，我会假设我可以输入其他输入并且不会让它们冻结在我身上。

我已尝试阅读有关该主题的其他一些帖子，但它们都有些不同，而且我尝试的所有方法似乎都无法解决问题。

我正在使用 React 16.8 开发 linux（使用 RN 时我使用 55.4）

我已经尝试让我的 componentDidMount 异步以及 redux-thunk 操作。它似乎没有任何帮助，所以我一定是做错了什么。

我尝试执行以下操作但没有成功。只是对我尝试的内容使用简短的形式。下面列出了实际代码。

async componentDidMount() {
    await getTasks().then();
}

我试过了

export const getTasks = () => (async (dispatch, getState) => {
    return await axios.get(`${URL}`, AJAX_CONFIG).then();
}

当前代码：

组件.js

componentDidMount() {
    const { userIntegrationSettings, getTasks } = this.props;
    // Sync our list of external API tasks
    if (!isEmpty(userIntegrationSettings)) {
        getTasks(userIntegrationSettings.token)
            // After we fetch our data from the API create a mapping we can use
            .then((tasks) => {
                Object.entries(tasks).forEach(([key, value]) => {
                    Object.assign(taskIdMapping, { [value.taskIdHuman]: key });
                });
            });
    }
}

Action.js

export const getTasks = () => ((dispatch, getState) => {
    const state = getState();
    const { token } = state.integrations;

    const URL = `${BASE_URL}/issues?fields=id,idReadable,summary,description`;
    const AJAX_CONFIG = getAjaxHeaders(token);

    dispatch(setIsFetchingTasks(true));

    return axios.get(`${URL}`, AJAX_CONFIG)
        .then((response) => {
            if (!isEmpty(response.data)) {
                response.data.forEach((task) => {
                    dispatch(addTask(task));
                });

                return response.data;
            } else {
                dispatch(setIsFetchingTasks(false));
            }
        })
        .catch((error) => {
            dispatch(setIsFetchingTasks(false));
            errorConsoleDump(error);
            errorHandler(error);
        });
});

reducer.js

export default (state = defaultState, action) => {
    switch (action.type) {
        case ADD_TASK:
        case UPDATE_TASK:
            return update(state, {
                byTaskId: { $merge: action.task },
                isFetching: { $set: false }
            });
        default:
            return state;
    }
};

Answer 1

那么在我的回答中，你要学什么？

• 使用 Redux 加载常规数据
• 设置组件生命周期方法，例如componentDidMount()
• 从componentDidMount() 调用动作创建者
• 动作创建者运行代码来发出 API 请求
• API 响应数据
• Action 创建者返回一个 action，并在 payload 属性上获取数据

好的，所以我们知道有两种方法可以在 Reactjs 应用程序中初始化状态，我们可以调用 constructor(props) 函数或调用组件生命周期方法。在这种情况下，我们可以假设是基于类的函数来执行组件生命周期方法。

所以不要这样：

async componentDidMount() {
  await getTasks().then();
}

试试这个：

componentDidMount() {
  this.props.fetchTasks();
}

所以动作创建者 (fetchTasks()) 状态值变成了组件this.props.fetchTasks(); 所以我们确实从componentDidMount() 调用动作创建者，但通常不是你这样做的方式。

异步操作发生在您的操作创建者内部，而不是您的 componentDidMount() 生命周期方法中。 componentDidMount() 生命周期方法的目的是在启动应用程序时启动该动作创建者。

所以通常情况下，组件通常负责通过调用动作创建者来获取数据，但它是发出 API 请求的动作创建者，所以你在哪里进行异步 JavaScript 操作，你要去哪里实现 ES7 async/await 语法。

换句话说，它不是启动数据获取过程的组件生命周期方法，这取决于操作创建者。组件生命周期方法只是调用正在启动数据获取过程的操作创建者，也就是异步请求。

需要明确的是，在将动作创建器导入组件并导入连接函数后，您可以从 componentDidMount() 生命周期方法调用 this.props.fetchTasks();，如下所示：

import React from "react";
import { connect } from "react-redux";
import { fetchTasks } from "../actions";

你从来没有提供你正在做这一切的组件的名称，但在该文件的底部你需要做export default connect(null, { fetchTasks })(ComponentName);

我将第一个参数保留为null，因为您必须传递mapStateToProps，但由于我不知道您是否有任何参数，所以您现在可以直接传递null。

而不是这个：

export const getTasks = () => (async (dispatch, getState) => {
    return await axios.get(`${URL}`, AJAX_CONFIG).then();
}

试试这个：

export const fetchTasks = () => async dispatch => {
  const response = await axios.get(`${URL}`, AJAX_CONFIG);
  dispatch({ type: "FETCH_TASKS", payload: response.data });
};

如果您不打算使用它，则无需在您的动作创建器中定义getState。您还缺少开发异步操作创建器时需要的 dispatch() 方法。 dispatch() 方法将调度该操作并将其发送到应用程序内的所有不同减速器。

这也是 Redux-Thunk 等中间件发挥作用的地方，因为动作创建者无法开箱即用地处理异步请求。

您没有展示如何连接您的 redux-thunk，但它通常位于您的根 index.js 文件中，它看起来像这样：

import React from "react";
import ReactDOM from "react-dom";
import "./index.scss";
import { Provider } from "react-redux";
import { createStore, applyMiddleware } from "redux";
import thunk from "redux-thunk";

import App from "./components/App";
import reducers from "./reducers";

const store = createStore(reducers, applyMiddleware(thunk));

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.querySelector("#root")

还记得我说过你需要实现的连接函数吗？这是实施的结果，或者您应该实施Provider 标签。使用Provider 标签，您的组件都可以访问 Redux 存储，但是为了将数据连接到您的组件，您需要导入连接函数。

connect 函数返回到 Provider 并告诉它它想要访问您拥有该生命周期方法的任何组件中的该数据。

如果您按照我上面的建议纠正了所有内容，那么 Redux-Thunk 绝对是您需要实施的。

为什么需要 Redux-Thunk？

它本质上没有内置任何东西，它只是一个通用中间件。它所做的一件事是允许我们处理动作创建者，这是您需要它为您做的事情。

通常动作创建者返回一个动作对象，但使用 redux-thunk，动作创建者可以返回一个动作对象或函数。

如果您返回一个动作对象，它必须仍然具有 type 属性，正如您在上面的代码示例中看到的那样，它也可以选择具有 payload 属性。

Redux-Thunk 允许您在动作创建器中返回动作或函数。

但为什么这很重要？谁在乎它是返回一个动作对象还是一个函数？有什么关系？

这又回到了异步 JavaScript 的话题，以及 Redux 中的中间件如何解决 Redux 无法开箱即用地处理异步 JavaScript 的问题。

因此，同步动作创建者会立即返回一个动作，其中包含准备好执行的数据。但是，当我们与 异步操作创建者（例如在这种情况下）合作时，它需要一些时间来准备好数据。

因此，任何发出网络请求的动作创建者都有资格作为异步动作创建者。

使用 JavaScript 的网络请求本质上是异步的。

Redux-Thunk 是一个中间件，它是一个 JavaScript 函数，将在您调度的每个操作中调用。中间件可以阻止 action 进入你的 reducer，修改 action 等等。

Answer 2

您设置了dispatch(setIsFetchingTasks(true))，但是当 axios 返回时，您从未将其设置为 false。您是否错过在return response.data; 之前添加dispatch(setIsFetchingTasks(false))？ 这可能是您的 UI 等待 fetchingTasks 完成的原因

Answer 3

我花了几个小时将我的代码从正常的 async/wait 重构为使用 redux thunk 来意识到问题实际上发生在 Deserializer

如果你有类似这样的代码：

import { Deserializer } from 'jsonapi-serializer'

new Deserializer({ keyForAttribute: 'underscore_case' })
    .deserialize(response.data, deserialized => { 
      return deserialized 
})

反序列化器始终处于同步模式，因此 UI 会一直等到同步模式 完成

我不确定如何使其异步。 如果有人能告诉我，那就太好了。谢谢