Обновление состояния из базы данных только в случае изменения базы данных в приложении «Реакция редукса»

Question

В моем приложении «Реакция редукса» я использую useEffect для загрузки данных из базы данных. У меня есть проверка props.data === null для загрузки данных, только если они еще не загружены. То есть, при первом посещении будут получены данные из базы данных, но при последующих посещениях вызов базы данных не производится. Однако при таком подходе я не могу обновлять локальное состояние на 100%, поскольку в данных могут быть изменения. Интересно, как я могу обновить состояние из базы данных, только если есть изменения в базе данных в приложении «Реагировать на избыточность»? Есть идеи?

useEffect(() => {
    if (props.loading == false) {
            if(props.data === null)
                props.fetchData(id)
    }
}, [])

Answer 1

Общение с базой данных обычно бывает односторонним. Вы не будете знать, изменились ли данные, пока не спросите базу данных.

Если вы можете выяснить, как часто ваши данные будут изменяться в среднем, вы можете вызывать метод fetchData с интервалом, чтобы обновлять его каждый раз. так часто.

Вот пример, который вызывает fetchData каждые две секунды.

function useInterval(callback, delay) {
  const savedCallback = React.useRef();

  React.useEffect(() => {
    savedCallback.current = callback;
  });

  React.useEffect(() => {
    function tick() {
      savedCallback.current();
    }

    let id = setInterval(tick, delay);
    return () => clearInterval(id);
  }, [delay]);
}

const averageDataRefreshDelay = 2 * 1000 // 2 seconds

const App = props => {
  const { fetchData } = props;
  useInterval(fetchData, averageDataRefreshDelay);
  
  return (
    <div>Your component</div>
   )
}

ReactDOM.render(<App fetchData={ () => console.log('... fetching data ...') } />, document.getElementById('root'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>