Реагируйте на экран загрузки перед загрузкой вызова API

Question

Я новичок в React и Redux, и я не нашел ни одного примера того, как сделать какой-то экран загрузки, прежде чем я получу первый вызов API, чтобы получить некоторую информацию, необходимую для отображения приложения (например, если пользователь вошел в систему,некоторые другие данные)

У меня уже есть приложение React, которое использует Redux и React-Router.Мне нужно создать экран загрузки, прежде чем рендеринг HomePage.Этот экран загрузки будет активен, пока я не получу ответ от API.После того, как я получу ответ, я отправлю их в магазин и отключу экран загрузки.

Я нашел пример того, как он мне нужен, здесь: https://boss.gg/ (они тоже используют React)

Answer 1

Разделите ваши действия на разные состояния: ожидание, успех, ошибка.Когда ваш запрос находится на рассмотрении, ваш компонент может отображать экран загрузки, который заменяется, когда запрос выполнен или произошла ошибка.С помощью redux-thunk вы можете создавать асинхронные действия.

В некотором псевдокоде это будет работать так:

Your 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)

Обратите внимание, что это пример одного вызова.Ваше состояние ожидания может быть комбинацией нескольких состояний ожидания в разных частях вашего магазина.