As the right to download the api to react?

Done action which will load data from url, but state.data vozvrashaet an empty array via action

reducer looks like this

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


Checked inside fetch feature through console.log all works.

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


Please do not do not scold, at the beginning of training there.
June 8th 19 at 16:55
2 answers
June 8th 19 at 16:57
For asynchronous requests you should use redux middleware, for example 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 => dispatch async => {
 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;
}
}
Thank you.
First I decided on a simple to do to understand - vernie92 commented on June 8th 19 at 17:00
well you can't do:
if (action.type === 'GET_DATA') {
 return { data: API() }
 }

You return the promise and the component will have to be updated before asynchronous response comes. Therefore, data is not visible. Here it is necessary to use middleware. redux-thunk you for learning enough for the eyes. - Lenny.Botsfo commented on June 8th 19 at 17:03
,
fetchInitialDataApi is the function that loads the data? I would find the whole code to understand - vernie92 commented on June 8th 19 at 17:06
well it's something like:
const fetchInitialDataApi = () => axios.get('http://swapi.co/api/people/?format=json');

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


In the case of fetch, like the need to change the line:
const { data } = await fetchDataApi();
on:
const data = await fetchDataApi();
Haven't used, don't remember.
I advise you to install axios. - Lenny.Botsfo commented on June 8th 19 at 17:09
June 8th 19 at 16:59
try this
export const DataReducer = (state = defaultState, action) => {
 if (action.type === 'GET_DATA') {
 return { ...state, data: API() }
}
 return state;
};
Strangely, it gives an error on the spread ... - unexpected token
Although es2015 attached to webpack. - vernie92 commented on June 8th 19 at 17:02
, API() is that
try to replace in some sort the array and see whether the data brought in the store
if Yes then the problem is here - Lenny.Botsfo commented on June 8th 19 at 17:05
add babel-polyfill - vernie92 commented on June 8th 19 at 17:08

Find more questions by tags ReduxReactJavaScript