0

Проблема с асинхронным запросом. Должно работать так: при запуске происходит запрос фоток на сервере, стартуем экшен (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;

1
  • может в useEffect засунуть всё до return 17 авг 2020 в 0:52

2 ответа 2

0

Нашёл ошибку сам. Нелепая, как часто и бывает. Я не добавил функцию ререндера в редакс (store.subscribe), скорее всего случайно затёр в ходе экспериментов. Вопрос закрыт.

0

Могу предложить, что проблема здесь:

state.serverData = action.serverData;

Я бы попробовал в этом месте делать копию state

2
  • return {...state} попробовал и несколько других способов. Вы это имеете в виду? Не помогает. Повторно отрисовка DOM не происходит. Я, наверное, что-то элементарное упускаю. Несколько дней уже не могу решить эту проблему. Был бы рад любому, даже общему совету, куда можно посмотреть ещё. 16 авг 2020 в 23:44
  • Опишите, пожалуйста, подробнее, что именно Вы имеете в виду. Приведите пример кода.
    – V-Mor
    20 авг 2020 в 5:42

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.