Как я могу получить доступ к текущему состоянию притока из useEffect?

Question

У меня есть список объектов (в моем случае «Альбомы»), извлеченных из базы данных.Мне нужно отредактировать эти объекты.В компоненте редактирования в хуке useEffect я запускаю действие для получения нужного альбома, используя его идентификатор.Это действие работает.Однако в том же самом useEffect я пытаюсь получить измененное состояние перед редуктором сработавшего действия.И теперь я сталкиваюсь с проблемой - все, что я получаю, - это предыдущее состояние.Как я могу реализовать в использовании useEffect выборку текущего состояния редукции?

Я видел подобные вопросы здесь, однако ни один из ответов не помог мне в моем случае использования.

Я использую избыточность-thunk.

Редактирование компонента.Проблема возникает в setFormData - он выбирает предыдущее состояние из редуктора, а не текущее.Кажется, что он срабатывает до того, как getAlbumById изменяет состояние:

//imports

const EditAlbum = ({
  album: { album, loading},
  createAlbum,
  getAlbumById,
  history,
  match
}) => {
  const [formData, setFormData] = useState({
    albumID: null,
    albumName: ''
  });

  useEffect(() => {
    getAlbumById(match.params.id);

    setFormData({
      albumID: loading || !album.albumID ? '' : album.albumID,
      albumName: loading || !album.albumName ? '' : album.albumName
    });

  }, [getAlbumById, loading]);

const { albumName, albumID } = formData;

  const onChange = e =>
    setFormData({ ...formData, [e.target.name]: e.target.value });

  const onSubmit = e => {
    e.preventDefault();
    createAlbum(formData, history, true);
  };

  return ( //code );
};



EditAlbum.propTypes = {
  createAlbum: PropTypes.func.isRequired,
  getAlbumById: PropTypes.func.isRequired,
  album: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
  album: state.album
});

export default connect(
  mapStateToProps,
  { createAlbum, getAlbumById }
)(withRouter(EditAlbum));

Действие:

export const getAlbumById = albumID => async dispatch => {
  try {
    const res = await axios.get(`/api/album/${albumID}`);

    dispatch({
      type: GET_ALBUM,
      payload: res.data
    });
  } catch (err) {
    dispatch({
      type: ALBUMS_ERROR,
      payload: { msg: err.response.statusText, status: err.response.status }
    });
  }
};

редуктор

const initialState = {
  album: null,
  albums: [],
  loading: true,
  error: {}
};

const album = (state = initialState, action) => {
  const { type, payload } = action;
  switch (type) {
    case GET_ALBUM:
      return {
        ...state,
        album: payload,
        loading: false
      };
    case ALBUMS_ERROR:
      return {
        ...state,
        error: payload,
        loading: false
      };
    default:
      return state;
  }
};

Буду благодарен за любую помощь/ идеи

Answer 1

Вы должны разделить свои эффекты на 2, один для загрузки альбома, когда идентификатор альбома меняется с маршрута:

  const [formData, setFormData] = useState({
    albumID: match.params.id,
    albumName: '',
  });
  const { albumName, albumID } = formData;
  //only get album by id when id changed
  useEffect(() => {
    getAlbumById(albumID);
  }, [albumID, getAlbumById]);

и один, когда данные поступили, чтобы установить состояние formData:

//custom hook to check if component is mounted
//  this needs to be imported in your component
//  https://github.com/jmlweb/isMounted
const useIsMounted = () => {
  const isMounted = useRef(false);
  useEffect(() => {
    isMounted.current = true;
    return () => (isMounted.current = false);
  }, []);
  return isMounted;
};

//in your component check if it's mounted 
//  because you cannot set state on unmounted component
const isMounted = useIsMounted();
useEffect(() => {
  //only if loading is false and still mounted
  if (loading === false && isMounted.current) {
    const { albumID, albumName } = album;
    setFormData({
      albumID,
      albumName,
    });
  }
}, [album, isMounted, loading]);

Ваше действие должно установить для загрузки значение true, когда оно начинает получать альбом:

export const getAlbumById = albumID => async dispatch => {
  try {
    //here you should dispatch an action that would
    //  set loading to true
    //dispatch({type:'LOAD_ALBUM'})
    const res = await axios.get(`/api/album/${albumID}`);

    dispatch({
      type: GET_ALBUM,
      payload: res.data
    });
  } catch (err) {
    dispatch({
      type: ALBUMS_ERROR,
      payload: { msg: err.response.statusText, status: err.response.status }
    });
  }
};

Обновление, определяющее, почему useEffect вызывается, когда не следует:

Не могли бы вы обновить вопрос с помощьювыход этого?

//only get album by id when id changed
useEffect(() => {
  console.log('In the get data effect');
  getAlbumById(albumID);
  return () => {
    console.log('Clean up get data effect');
    if (albumID !== pref.current.albumID) {
      console.log(
        'XXXX album ID changed:',
        pref.current.albumID,
        albumID
      );
    }
    if (getAlbumById !== pref.current.getAlbumById) {
      console.log(
        'XXX getAlbumById changed',
        pref.current.getAlbumById,
        getAlbumById
      );
    }
  };
}, [albumID, getAlbumById]);