組件未檢測到 state 更改使用 Redux 和 React 而不刷新組件

Question

我在檢測 React 應用程序中的 Redux 減速器的 state 更改時遇到問題。 當我在一個組件中更改 state 時，應用程序中的另一個組件在沒有再次加載或刷新組件的情況下不會收到更新。 考慮以下組件：
組件1.js

const Component1 = ({
  getFromDB,
  updateDB,
  db_stuff: { db_stuff }
}) => {
  const id = some-id;

  useEffect(() => {
    getFromDB(id);
    updateDB(id, { data: someUpdate });
  }, [id]);
  
  // this updates the database and dispatches new state change
  const handleUpdateDB = () => {
    updateDB(id, { data: someUpdate });
  };

  return (
    <Fragment>
      <Button
        onClick={handleUpdateDB}
      >
        Update DB
      </Button>
    </Fragment>
  )
};

Component1.propTypes = {
  getFromDB: PropTypes.func.isRequired,
  updateDB: PropTypes.func.isRequired,
  db_stuff: PropTypes.object.isRequired
};

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

export default connect(mapStateToProps, {
  updateDB,
  getFromDB
})(Component1);

在上面的組件中，當單擊按鈕時，會調用該操作來寫入數據庫並更改應用程序 state。 在另一個組件中，我有 state 但它沒有檢測到 state 更改。 下面是Component2的內容：
組件2

const Component2 = ({
  getFromDB,
  db_stuff: { db_stuff }
}) => {
  const id = some-id;
  const [openAlert, setOpenAlert] = useState(false);
  const [redirect, setRedirect] = useState(false);

  useEffect(() => {
    getFromDB(id);
  }, [id]);

  const handleNextPageClick = () => {
    // This is were the issue is I believe but I have included the other code in case it is needed  
    // I have tried removing getFromDB(id) but it doesn't help
    // I have tried making the function async and using await getFromDB(id) but this doesn't work either
    getFromDB(id);
    if (db_stuff && db_stuff.data <= someOtherData) {
      setOpenAlert(true);
    } else if (db_stuff && db_stuff.data > someOtherData) {
      setRedirect(true);
    }
  };

  const handleAlertClose = () => {
    setOpenAlert(false);
  };

  return (
    <Fragment>
      //... other components
      <Button
        onClick={handleNextPageClick}
      >
        Next
      </Button>
      <Snackbar
        open={openAlert}
        autoHideDuration={3000}
        onClose={handleAlertClose}
      >
        <Alert onClose={handleAlertClose} severity="info">
          Please wait
        </Alert>
      </Snackbar>
      {redirect ? <Redirect to={`/AnotherComponent`} /> : null}
    </Fragment>
  );
  
};

Component2.propTypes = {
  getFromDB: PropTypes.func.isRequired,
  db_stuff: PropTypes.object.isRequired
};

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

export default connect(mapStateToProps, {
  getFromDB
})(Component2);

因此，當 Component2 中的用戶單擊下一步時，他們將收到一條警報，通知他們請等待 Component1 中的用戶繼續。 當 Component1 中的用戶單擊下一步時，數據庫和 state 將更新。 但是當用戶單擊按鈕時，他們會再次收到通知。 如果他們再次單擊該按鈕，則允許他們繼續。 因此 state 僅在組件中發生事件后更新（用戶單擊下一頁更新狀態）。 一旦從 Component1 進行了 state 更改，我希望 state 在 Component2 中更新。 到目前為止，必須單擊該按鈕兩次。 我見過類似的問題，但沒有一個解決方案奏效。 非常感謝任何幫助或指導。 先感謝您。

Answer 1

所以應用程序在兩台不同的機器上運行？ 然后，您期望一個用戶發送的更新到達第二個用戶。 但是一旦組件加載，您使用 GET 請求來獲取當前的 state。 沒有任何機制可以訂閱來自遠程 api 的任何 state 更改（稍后發生）。 因此，只有刷新才會觸發應用程序獲取更新的 state。

要獲得即時更新，Websocket 實現可以提供這種即時更新。 但它需要完全不同的設置。 現在您可以定期輪詢遠程 api。 每隔幾秒說一次。