Changing React navbar component with redux data

Question

So basically here I want my navbar routes to change along with login info from the redux reducer, but the routes stay static.

useEffect(() => {
  getUserInfo();
  console.log(props.userInfo?. isLoggedIn)
  if (props?.userInfo?.isLoggedIn == true) {
    setUserState(['profile','dashboard','wallet']);
  } else {
    setUserState(['sign-in','sign-in','sign-in']);
  }
},[props])

So here I store my routes in the useState hook as an array, but this useEffect hook does not cast until I change the route by a <Link></Link> component. I want it to cast as soon as the redux state changes.

score 0 · Answer 1 · answered Jan 16 '23 at 16:13

0

const [userState, setUserState] = useState([])
useEffect(() => {
    getUserInfo();
    console.log(props.userInfo?. isLoggedIn)
    if(props?.userInfo?.isLoggedIn == true) {
      setUserState(['profile','dashboard','wallet']);
    } else {
      setUserState(['sign-in','sign-in','sign-in']);
    }
  },[props,userState])

Add userState in useEffect dependancy array.

answered Jan 16 '23 at 16:13

Salman Nasir

30
2

Adding `userState` as a dependency would create a render loop since the hook callback enqueues a `userState` update. – Drew Reese Jan 16 '23 at 19:32

score 0 · Answer 2 · answered Jan 16 '23 at 19:31

Don't store derived state in React state, this is a React anti-pattern. You can simply rendered the UI from the "dependencies" directly. This assumes the component is correctly subscribed to the Redux store and userInfo is selected state from the store.

const authenticatedRoutes = ['profile','dashboard','wallet'];
const anonymousRoutes = ['sign-in','sign-in','sign-in'];
...

return (
  ...
  {(props.userInfo?.isLoggedIn ? authenticatedRoutes : anonymousRoutes).map(path => {
    // compute and return JSX
  })}
  ...
);

A more common/practical solution is to create route protector components that read the userInfo.isLoggedIn property and conditionally render the protected route/component or redirect to a "safe route". You can read more about general route protection in my answer here.

Changing React navbar component with redux data

2 Answers2