how to auto refresh component when redux state get updated

Question

I currently store user name in redux store and show it in topbar after user logged in. (Shown in screenshots). However, it do not re-render automatically when redux state gets updated. I still need to do some actions in topbar then username does appear. Otherwise, it does not appear. So the question, how to force to re-render topbar component from my login component. Another question: user name will disapprear when refresh page. So is there any option to persist data with redux state? Or it's impossible.

const Login = () => {
  ...
  const handleLogin = async googleData => {
    ...
    //store user name value als application state into redux store
    store.dispatch(nameActionCreator(googleData.profileObj.name));
    ...
  }
}

const TopBar = () => {
  ...
  return(
    ...
    <h5>store.getState().userNameRecuder.name</h5>
    ...
  )
}

Before login

After login

Garrow

Answer 1

The first question

Short answer:

you must call the selector function with useSelector hook. you are calling it directly in your <h5> element. so it's not working.

const TopBar = () => {
  const username = useSelector(() => store.getState().userNameRecuder.name)

  return(
    <h5>{username}</h5>
  )
}

Long answer with best practices:

You need to create a selector and use it in your component to re-render your component after the state changes.

In the selector.js

const selectUsername = (state) => state.userNameRecuder.name

export selectUsername;

Now, in your Topbar component, you need to implement the useSelector hook:

import {useSelector} from 'react-redux';
import {selectUsername} from 'store/selectors';

function TopBar () {
  
  const username = useSelector(selectUsername)

  return (
    <p>username</p>
  )
}

Updating the state with proper action (to update username) will cause a re-render in the Topbar component to get the new username from the store.

The second question

There are many great ways to persist data for example storing them on cookies, localStorage or using third-party libraries like redux-persist, and so on... take a look at this post.

Thereat

Answer 2

It works based on @novonimo's answer. Even without apart selector.js. Just connect the redux state with the component's state by using useSelector hooks, so the component will automatically re-rendered when the redux state changes.

const TopBar = () => {
      const userName = useSelector(() => store.getState().userNameRecuder.name);
      
      return(
        ...
        <h5>userName</h5>
        ...
      )
    }

Garrow

thanks for your nice answer, actually the "() => store.getState().userNameRecuder.name" is the selector but implicitly defined in your useSelector hooks. separating selectors will help in case of changing store object or for debugging – Thereat