Часы React-Redux не обновляют свое состояние в DOM

Question

Я делаю часы, которые "SET_COUNT" отправляются каждую секунду.

  useEffect(() => {
    // persistor.purge();

    setInterval(() => {
      store.dispatch(setCounter(store.getState().counterReducer.cnt + 1));
      console.log(store.getState().counterReducer.cnt);
    }, 1000);
  }, []);

И также отображается счетчик.

    <div className="App">
      <p>{store.getState().counterReducer.cnt}</p>
    </div>

cnt обновляется каждую секунду, но он отображается только в консоли, а не в DOM.

Есть идеи?

Answer 1

Напишите счетчик (экспортируйте его, используя connect).

import React, { useEffect } from "react";
import { connect } from "react-redux";
import { setCounter } from "./rootReducer";
import store from "./store";

 useEffect(() => {
    // persistor.purge();

    setInterval(() => {
      store.dispatch(setCounter(store.getState().counterReducer.cnt + 1));
      console.log(store.getState().counterReducer.cnt);
    }, 1000);
  }, []);

function mapStateToProps(state) {
  return { cnt: state.counterReducer.cnt };
}

export default connect(mapStateToProps)(Counter);

Затем в вашем приложении импортируйте свой счетчик и используйте провайдера

import React from "react";
import store from "./store";
import { Provider } from "react-redux";
import Counter from "./Counter";

export default function App() {
  return (
    <Provider store={store}>
      <Counter />
    </Provider>
  );
}

CodeSandbox link https://codesandbox.io/s/redux-persist-test-c5mh9?file= /src/Counter.js