使用反应在提交时附加加载组件

Question

我有一个解决方法，我一直在尝试在单击提交表单后附加加载器或进度条组件。我在 redux 初始状态下声明了加载，但不知道如何从这里开始。

是的，我知道如何在使用 GET 请求从 API 获取数据时附加加载组件，但不知道如何使用 POST 请求。所以，表单应该加载一个点击提交的组件，然后它将数据发送到商店。

以下是沙盒链接： https://codesandbox.io/s/brave-lewin-bp3w6?file=/src/Form.jsx

任何帮助将不胜感激。

Answer 1

创建一个额外的操作startLoading，您可以在 API 调用之前调度它：

export const START_LOADING = "START_LOADING";

export const startLoading = () => {
  return {
    type: START_LOADING
  };
};

export default function(state = initialState, action) {
  switch (action.type) {
    case START_LOADING:
      return {
        ...state,
        loading: true
      };
    case ADD_USERS:
      return {
        ...state,
        users: [...state.users, action.payload],
        loading: false
      };
    default:
      return state;
  }
}

然后在你的onSubmit 你可以这样做：

props.startLoading();
props.addUsers(values);