How to rerender App.js?

Question

React

I have a project using react-redux. Some string variable is stored in the store, I change it from the internal pages of the site. The problem is that in App.js the change of this variable is not visible, because in App.js the render only works once.

Please tell me how can I make App.js react to changing a variable in the store? In general, is it good practice to repeatedly run the render method in App.js?

app.js

function App() {
    let isVisibleModal;
    store.subscribe(v => {
      isVisibleModal = store.getState().appReducer.isVisibleModal;
      console.log(isVisibleModal)
    });
  
    return (
      <BrowserRouter>
        <div className="App">
            { isVisibleModal }
        </div>
      </BrowserRouter>
    );
}

In the code above, console.log is executed every time a variable in the store is changed, but in the template, the display of this variable does not change

Answer 1

Forgot to wrap the component in connect from redux