Всем привет.
Возникла следующая проблема. Хочу сделать вывод данных с jsonplaceholder, а именно вывод фото с помощью React. Но чтобы данные выводились не сразу, а по нажатию на кнопку. Сделал код, все выводится, но как привязать к кнопке не могу понять. Без кнопки все работает - с кнопкой, ошибка.
Подскажите, куда копать или где посмотреть подобную инфу
import { PHOTO_RESOLVE, PHOTO_REJECTED } from “…/constants”;
const setPhotoData = (data) => ({ type: PHOTO_RESOLVE, payload: data });
const setPhotoError = () => ({ type: PHOTO_REJECTED });
export const getPhoto = () => {
return (dispatch) => { fetch('https://jsonplaceholder.typicode.com/photos') .then((data) => data.json()) .then((response) => dispatch(setPhotoData(response.slice(0, 10)))) .catch(() => dispatch(setPhotoError())) };
};
import React from “react”;
import { connect } from “react-redux”;
import { getPhoto } from “…/…/actions/photo”;
class Photo extends React.Component {
componentDidMount() { this.props.getPhoto(); } render() { const {photo } = this.props; return ( // <button type="button" onClick={()=> photo()}> <div> <ul> { photo.map((item) => ( <li key={item.id}> <img src={item.url} alt={`photo-${item.id}`}/> </li> )) } </ul> </div> ) }
}
const mapStateToProps = (state) => ({
isLoading: state.photoData.isLoading, photo: state.photoData.photo
});
const mapDispatchToProps = {
getPhoto: getPhoto
};
export const PhotoContainer = connect(mapStateToProps, mapDispatchToProps)(Photo);
import { PHOTO_RESOLVE, PHOTO_REJECTED } from “…/constants”;
const initialValues = {
photo: [], isLoading: true, isError: false
}
export const photoReducer = (state = initialValues, action) => {
switch(action.type) { case PHOTO_RESOLVE: { return { ...state, photo: action.payload, isLoading: false }; } case PHOTO_REJECTED: { return { ...state, isLoading: false, isError: true } } default: { return state; } }
};