组件未检测到 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。 每隔几秒说一次。