如何从 useEffect 访问当前的 redux 状态？

Question

我有一个从数据库中提取的对象列表（在我的例子中是“专辑”）。我需要编辑这些对象。在 useEffect 挂钩中的编辑组件中，我启动了使用其 ID 获取所需专辑的操作。这个动作有效。但是，在同一个 useEffect 中，我试图在触发操作之前获取更改的 redux 状态。现在我面临这个问题——我获取的只是 previos 状态。如何在当前 redux 状态的 useEffect 获取中实现？

我在这里看到过类似的问题，但是没有一个答案对我的用例有帮助。

我正在使用 redux-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 个，当专辑 id 从路由改变时加载专辑：

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]);

当开始获取专辑时，您的操作应将 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]);