jeerjmin
@jeerjmin

Как правиль загрузить api в react?

Сделал экшн на который будут загружаться данные с url, но state.data возвражает пустой массив через action

reducer выглядит так

const defaultState = {
  data: []
}


const API = () => {
  return  fetch( 'http://swapi.co/api/people/?format=json')
          .then( response => response.json() )


}

export const DataReducer = (state = defaultState, action) => {
  if (action.type === 'GET_DATA') {
    return { data: API() }
  }
    return state;
};


Проверял fetch внутри компонента через console.log все работает.

componentDidMount() {
      fetch( 'https://api.coinmarketcap.com/v1/ticker/?limit=10%20')
        .then( response => response.json() )
        .then( (data) => this.setState({items:data}))
    }

  render() {
      return    {console.log(this.state.items)}


Прошу не сильно не ругать, в начале обучения нахожусь.
  • Вопрос задан
  • 128 просмотров
Пригласить эксперта
Ответы на вопрос 2
  • rockon404
    @rockon404
    Frontend Developer
    Для асинхронных запросов следует использовать redux middleware, например redux-thunk:
    import { fetchInitialDataApi } from './api';
    
    const FETCH_DATA_REQUEST = 'FETCH_DATA_REQUEST';
    const FETCH_DATA_SUCCESS = 'FETCH_DATA_SUCCESS';
    const FETCH_DATA_ERROR = 'FETCH_DATA_ERROR';
    
    const fetchDataRequest = () => ({ type:  FETCH_DATA_REQUEST });
    
    const fetchDataSuccess = data => ({
      type:  FETCH_DATA_SUCCES,
      payload: data,
    });
    
    const fetchDataError = error => ({
      type:  FETCH_DATA_ERROR,
      payload: error,
    });
    
    const fetchData => async dispatch => {
      try {
        dispatch(fetchDataRequest());
        const { data } = await fetchDataApi();
        dispatch(fetchDataSuccess(data));
      } catch error {
        dispatch(fetchDataError(error));
      }
    };
    
    const initialState = {
      data: {},
      isLoading: false,
      isError: false,
      error: null,
    };
    
    export default function(state = initialState, action) {
      const { type, payload } = action;
    
      switch (type) {
        case FETCH_DATA_REQUEST:
          return {
            ...state,
            isLoading: true,
            isError: false,
            error: null,
          };
        case FETCH__DATA_SUCCESS:
          return {
            ...state,
            data: payload,
            isLoading: false,
          };
        case FETCH_DATA_ERROR:
          return {
            ...state,
            isLoading: false,
            isError: true,
            error: payload,
          };
      default:
        return state;
      }
    }
    Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы