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

Question

[mr jeery]

Сделал экшн на который будут загружаться данные с 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)}

Прошу не сильно не ругать, в начале обучения нахожусь.

Answer 1

[Антон Спирин]

Для асинхронных запросов следует использовать 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;
  }
}

Comments

[mr jeery]

Спасибо.
Сначала решил по простому сделать, для понимания

[Антон Спирин]

mr jeery, ну так делать нельзя:

if (action.type === 'GET_DATA') {
    return { data: API() }
  }

Вы ведь возвращаете промис и компонент успеет обновиться, до того как приходит асинхронный ответ. Поэтому данных не видно. Тут обязательно надо использовать middleware. redux-thunk вам для обучения за глаза хватит.

[mr jeery]

Антон Спирин,
fetchInitialDataApi это функция которая загружает данные? найти бы целый код, чтобы разобраться

[Антон Спирин]

mr jeery, ну это что-то вроде:

const fetchInitialDataApi = () => axios.get('http://swapi.co/api/people/?format=json');

или:

const fetchInitialDataApi = () => fetch('http://swapi.co/api/people/?format=json')
          .then(res => res.json());

В случае с fetch, вроде надо поменять строку:
const { data } = await fetchDataApi();
на:
const data = await fetchDataApi();
Давно его не использовал, не помню.
Советую установить axios.

Answer 2

[Роман Александрович]

попробуйте так

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

Comments

[mr jeery]

Странно, ошибку выдает на spread ... - unexpected token
Хотя es2015 добавлен в webpack.

[Роман Александрович]

mr jeery, API() это что
попробуйте заменить на какой нибудь массив и посмотреть занеслись ли данные в store
если да значит проблема здесь

[Антон Спирин]

mr jeery, добавьте babel-polyfill