Проблема с асинхронным запросом. Должно работать так: при запуске происходит запрос фоток на сервере, стартуем экшен (fetchPhotosRequestAC), который меняет статус в стейте isLoaded на false. Компонента видит этот false и выдаёт сообщение "Фотографии загружаются..." Когда данные пришли, запускаем новый экшен (fetchPhotosSuccessAC), в него передаём полученные данные. В редюсере данные записываются в стейт, а флаг меняется на isLoaded = true. Типа, "компонента, смотри, данные загрузились, возьми их из стейта и отрисуйся заново". Но ничего не происходит, компонента не обновляется.
Компонента:
import React from 'react';
import s from './Main.module.scss';
import Unsplash, {toJson} from 'unsplash-js';
import {fetchPhotosRequestAC, fetchPhotosSuccessAC} from '../../redux/reducer';
function Main (props) {
const unsplash = new Unsplash ({
accessKey: props.state.security.ACCESS_KEY,
secret: props.state.security.SECRET,
callbackUrl: 'http://localhost:3000/auth',
});
props.dispatch (fetchPhotosRequestAC ());
const p = new Promise (function (resolve, reject) {
// Просим сервер прислать нам котиков
unsplash.search.photos ('cats', 1).then (toJson).then (json => {
let serverData = json;
resolve (serverData);
});
});
// Когда котики получены
p.then (serverData => {
props.dispatch (fetchPhotosSuccessAC (serverData));
});
// debugger;
return (
<div className={s.main__wrapper}>
{console.log (props.state.isLoaded)}
{props.state.isLoaded
? props.state.serverData.results.map ((el, i) => (
<img
id={el.id}
src={el.urls.full}
alt={el.alt_description}
key={i}
/>
))
: <p>Фотографии загружаются...</p>}
</div>
);
}
export default Main;
Reducer (упрощённый):
// action names
const FETCH_PHOTOS_REQUEST = 'FETCH_PHOTOS_REQUEST';
const FETCH_PHOTOS_SUCCESS = 'FETCH_PHOTOS_SUCCESS';
// actions
const reducer = (state, action) => {
switch (action.type) {
case FETCH_PHOTOS_REQUEST: {
state.isLoaded = false;
return state;
}
case FETCH_PHOTOS_SUCCESS: {
state.isLoaded = true;
state.serverData = action.serverData;
return state;
}
default:
return state;
}
};
export const fetchPhotosRequestAC = () => ({type: FETCH_PHOTOS_REQUEST});
export const fetchPhotosSuccessAC = serverData => ({
type: FETCH_PHOTOS_SUCCESS,
serverData,
});
export default reducer;
useEffect
засунуть всё доreturn