确保在浏览器会话中当前redux状态

Question

在没有第三方图书馆的情况下，在浏览器会议上刷新状态的最佳实践是什么？在触发状态的对象上下载之前，我需要确保数据是最新的。我尝试使用多个使用效果（一个更新数据，一个以触发下载），但状态函数在更新对象之前在Props中呼叫下载。我知道状态是异步设置的，但无法解决此问题。

function DownloadButton(props){
  const {selected} = props;
  let selectedFile = selected ? props.all.files[selected] : null;
  const [downloaded, setDownloaded] = useState(false);

  useEffect(() => {
    if(selected && downloaded === true){
      selectedFile.download();
    }
      setDownloaded(false);   
  }, [props.all, downloaded]);

  return(
     <DownloadButton 
        onClick={() => {
          //trigger refresh of props.all
          props.refresh();
          //below works if wrapped in setTimeout
          setDownloaded(true);
        }}
     />
  );

}

const mapStateToProps = state => {
  return {
    all: state.all
  }
}

const mapDispatchToProps = dispatch => {
  return {
    refresh: () => dispatch({type: "GET_ALL"})
  } 
}

export default connect(mapStateToProps, mapDispatchToProps)(DownloadButton);

Answer 1

在我看来，该组件与刷新机制有点涉及，所以我将其委派给了Redux Action：

// async download action
const downloadFile = (fileName) => async (dispatch, getState) => {
  await dispatch(refresh());
  const file = getState().all.files[fileName];
  file.download(); // it's not recommended to have functions in redux state btw
};

function DownloadButton(props) {
  const { selected, downloadFile } = props;

  return(
    <>
      {!!selected && <DownloadButton onClick={() => downloadFile(selected)} />}
    </>
  );
}

const mapDispatchToProps = { downloadFile };