如何在 redux 状态更改时渲染 React 组件？

Question

I am using this redux-socket.io middleware to dispatch actions from the server on socket.io requests. This part works fine, all the stuff I needed until now, I could do with this.

Now I am trying to use this middleware to dispatch an action that sets a piece of state, then I would like to render a React component (basically a floating window, above everything else) when the state contains a specific key.

The problem is, after dispatching the action, I am not sure how to make React render a component on state change. (Above the currently rendered component)

Since I want to render this component above everything else, I don't think it would be a good idea to check for updated props in every single component I have.

I thought about using the subscribe API but I haven't found any examples of rendering a component from inside there.

What would be the best solution here?

Answer 1

You can check the state in your return for the render with something like a ternary operator and if true, then render the popup.

{state === correct ? <PopUp/> : null}

Every time state changes, the page is dynamically re-rendered.