使用 React 在提交时附加一个加载组件

Question

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

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

沙箱如下link： 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);

使用 React 在提交时附加一个加载组件

attach a loading component on submit using react

reactjs

redux

react-redux

formik