Update one component after another component updates redux state

JavaScript
1

So I have a Navbar component that is rendering a number (the amount of fake money in a user’s wallet).

When they create a post in the forum component, the backend updates their wallet with 50 more money.

The Navbar still shows the old amount of money. When Navbar mounts (componentDidMount) it dispatches the action to getWallet, which makes a backend call to see the user’s wallet balance and puts it in Redux state. This works fine.

Problem is, I can’t just call getWallet over and over or it will put too many calls to the API. So how can my Navbar component be told to update it’s wallet property when a different component is modifying the wallet in Redux?

In the code, the components I am working with are in client/src
GitHub:

1 Like
2

Within NavBar, you could use:
ComponentDidUpdate(prevProps) {
if (prevProps.wallet !== this.props.wallet) {
this.setState({ wallet: wallet })
}
}

This would involve adding wallet to the state as well

1 Like
3

Thank you! In addition I also put getWallet in the componentDidMount of Thread, so when a new thread is created and the router pushes the user to the new thread component it mounts, updates the wallet in Redux store, and then Navbar can get the new value.