在获取API调用之前重新启动加载屏幕

Question

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

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

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

Answer 1

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

在某些伪代码中，这将是这样的：

你的actionTypes：

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商店不同部分中多个待处理状态的组合。