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


Прошу не сильно не ругать, в начале обучения нахожусь.
  • Вопрос задан
  • 166 просмотров
Пригласить эксперта
Ответы на вопрос 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;
  }
}
Ответ написан
попробуйте так
export const DataReducer = (state = defaultState, action) => {
  if (action.type === 'GET_DATA') {
    return { ...state, data: API() }
  }
    return state;
};
Ответ написан
Ваш ответ на вопрос

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

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