import React, { Component } from 'react';
import { connect } from 'react-redux';
class UsersList extends Component {
componentDidMount() {
this.getUsers();
}
getUsers = () => {
let { dispatch } = this.props;
let arr = [];
fetch(`https://api.github.com/search/users?q=Donetsk`)
.then(res => { return res.json() })
.then(res => {
return res.items.map((result) => {
return result.login
});
}).then(logins=>{
const promises = logins.map((login)=> fetch(`https://api.github.com/users/${login}`).then(res=>res.json()));
return Promise.all(promises);
}).then((users)=>{
if(users){
dispatch({ type: 'GET_USERS', users });
}
})
}
render() {
let { users } = this.props;
return (
<div>
<h2>Users</h2>
{users.map((user) => {
return (
<div>
<p>{user.login}</p>
<p>{user.name}</p>
<p>{user.location}</p>
</div>
);
})}
</div>
)
}
}
const mapStateToProps = (state) => {
return {
users: state.users
}
}
export default connect(mapStateToProps)(UsersList);const someMiddleware = store => next => action => {
if(action.type === 'Нужный_вам_экшн'){
loadData(store.dispatch);
}
}const loadData = async(dispatch) =>{
const resultData = await fetchDataFromServer();
dispatch(actions.saveData(resultData));
}