在获取 API 调用之前反应加载屏幕

Question

我是 React 和 Redux 的初学者，在我获取第一个 API 调用以获取应用程序渲染所需的一些信息之前，我没有找到任何关于如何执行某种加载屏幕的示例（例如，如果用户已登录，其他一些数据）

我已经有了使用 Redux 和 React-Router 的 React App。我需要在 HomePage 呈现之前创建一些加载屏幕。在我收到 API 的响应之前，此加载屏幕将处于活动状态。收到回复后，我会将它们发送到商店并禁用加载屏幕。

我在这里找到了我需要它的示例：https://boss.gg/（他们也使用 React）

Answer 1

将您的操作划分为不同的状态：待处理、成功、错误。当您的请求处于待处理状态时，您的组件可以显示一个加载屏幕，当请求完成或出错时该屏幕会被替换。在 redux-thunk 的帮助下，您可以创建 asyc 操作。

在有些伪代码中，这将像这样工作：

您的操作类型：

export const GET_EXAMPLE_ERROR = 'GET_EXAMPLE_ERROR':
export const GET_EXAMPLE_SUCCESS = 'GET_EXAMPLE_SUCCESS':
export const GET_EXAMPLE_PENDING = 'GET_EXAMPLE_PENDING':

你的行为：

export function getExampleSuccess(payload) {
  return {
    type: exampleActionTypes.GET_EXAMPLE_SUCCESS,
    payload,
  };
}
export function getExampleError(error) {
  return {
    type: exampleActionTypes.GET_EXAMPLE_ERROR,
    error,
  };
}
export function getExamplePending() {
  return {
    type: exampleActionTypes.GET_EXAMPLE_PENDING,
  };
}
export function getExample() {
  return async dispatch => {
    dispatch(getExamplePending());
    try {
      const result = await exampleService.getData();
      dispatch(getExampleSuccess(result));
    } catch (error) {
      dispatch(getExampleError(error));
    }
  };
}

你的减速器：

export default function exampleReducer(state = initialState.example, action) {
  switch (action.type) {
    case exampleActionTypes.GET_EXAMPLE_ERROR:
      return {
        ...state,
        example: {
          ...state.example,
          error: action.error,
          pending: false,
        },
      };
    case exampleActionTypes.GET_EXAMPLE_SUCCESS:
      return {
        ...state,
        example: {
          ...state.example,
          result: action.payload,
          pending: false,
        },
      };
    case exampleActionTypes.GET_EXAMPLE_PENDING:
      return {
        ...state,
        example: {
          ...state.example,
          error: null,
          pending: true,
        },
      };

    default:
      return state;
  }
}

你的组件：

class ExampleComponent extends React.Component {

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

    render() {
        if( this.props.pending ) {
            return <Loader />;
        }

        return <div>Your component</div>
    }
}

const mapStateToProps => ({
    pending: state.example.pending
});

const mapDispatchToProps => ({
    getExample
})

export default connect(mapStateToProps, mapDispatchToProps)(ExampleComponent)

请注意，这是单个调用的示例。您的待处理状态可以是您的 redux 存储的不同部分中的多个待处理状态的组合。