Ответы пользователя Антон Спирин по тегу «JavaScript»

Как сделать экспорт в react\redux после запроса API?

Антон Спирин @rockon404 Куратор тега React

Frontend Developer

Сам вопрос поставлен вразрез с концепцией Redux, да и самой модульной концепцией JavaScript. Вам не надо пытаться экспортировать модуль после запроса, так делать нельзя. Вам надо задать начальное состояние и определить там ключи состояния isLoading, isError. При инициализации приложения произойдет запрос на сервер за данными и пока они не пришли isLoading будет иметь значение true, вы, в идеале, в этот момент должны показывать пользователю прелоадер.
Ну, а то что вы пытались сделать это в корне не правильно.

При использовании redux-thunk должно получится, что-то вроде:

import { fetchInitialDataApi } from './api';

const FETCH_INITIAL_DATA_REQUEST = 'FETCH_INITIAL_DATA_REQUEST';
const FETCH_INITIAL_DATA_SUCCESS = 'FETCH_INITIAL_DATA_SUCCESS';
const FETCH_INITIAL_DATA_ERROR = 'FETCH_INITIAL_DATA_ERROR';

const fetchInitialDataRequest = () => ({ type:  FETCH_INITIAL_DATA_REQUEST });
const fetchInitialDataSuccess = data => ({
  type:  FETCH_INITIAL_DATA_SUCCES,
  payload: data,
});
const fetchInitialDataError = error => ({
  type:  FETCH_INITIAL_DATA_ERROR,
  payload: error,
});

const fetchInitialData => async dispatch => {
  try {
    dispatch(fetchInitialDataRequest());
    const { data } = await fetchInitialDataApi();
    dispatch(fetchInitialDataSuccess(data));
  } catch error {
    dispatch(fetchInitialDataError(error));
  }
};

const initialState = {
  data: {},
  isLoading: false,
  isError: false,
  error: null,
};

export default function(state = initialState, action) {
  const { type, payload } = action;

  switch (type) {
    case FETCH_INITIAL_DATA_REQUEST:
      return {
        ...state,
        isLoading: true,
        isError: false,
        error: null,
      };
    case FETCH_INITIAL_DATA_SUCCESS:
      return {
        ...state,
        data: payload,
        isLoading: false,
      };
    case FETCH_INITIAL_DATA_ERROR:
      return {
        ...state,
        isLoading: false,
        isError: true,
        error: payload,
      };
  default:
    return state;
  }
}

Если же хотите получать начальные данные сразу и они статичные, то пишите их в шаблон страницы приложения в window._data и забирайте через reducer:
export default (state = window._data) => state;

Войдите на сайт