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

Posted 2023-02-22

【中文标题】在获取 API 调用之前反应加载屏幕

【英文标题】：React loading screen before fetching API call

【发布时间】：2019-02-01 10:32:48

【问题描述】：

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

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

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

【问题讨论】：

检查这个问题，我想它会有所帮助：***.com/questions/40987309/…

【参考方案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 存储的不同部分中的多个待处理状态的组合。

【讨论】：

不错！谢谢，这看起来不错。我想我会这样做，但我看到了我使用不同方法发送的示例网站。我正在处理他们的请求，我发现他们的加载器位于 React App 之上，远离应用程序根目录，并且似乎 API 调用甚至在 React 唤醒之前就完成了，因此即使在他开始之前，获取的数据也可以注入到 React 中。这是可能的，还是他们可能使用其他方法，这并不重要，因为你发给我的东西可以正常工作？

有很多方法可以解决这个问题。 Rafaels 对您最初问题的回答是解决应用程序初始加载问题的好方法，而此解决方案在后续加载状态下实现起来更加通用。