How can i notify to App for what reload the app to show another screen?

Question

I am in login screen i pressed the button login so

that button have this action

store.dispatch({
      type: 'login',
      payload: {
        name: email.value
      },
    })

on the reducers change the value

export default function (state, action) {
  switch (action.type) {
    case 'login':
      return {
        ...state,
        user: action.payload,
        isLogged:true
      }
    default:
      return newState
  }
}

now i have to notify to App.js for the new change because that is depend to show the stack.screen

export default function App() {
  return (
    <Provider store={store} theme={theme}>
      <Tabs store={store} />
    </Provider>
  )
}

How can i notify to App for what reload the app to show another screen?

but never my component is updated, i was trying to update my component using useEffect but not

function Tabs ({ user })  {  
  const {
    data: { isLogged },
  } = useSelector((state) => state)

  
  useEffect(() => {
    console.log(1234546)
  }, [isLogged, user])

 return (
     <Stack.Navigator >
            { !store.getState().data.isLogged ?
              <Stack.Screen
                name="loginScreen1"
                component={HomeScreen}
                options={{ headerShown: false }}
              /> :
              <Stack.Screen
                name="main"
                component={MyTabs}
                options={{ headerShown: false }}
              />}
          </Stack.Navigator>
 )

Answer 1

When working with States Or Redux We don't have to tell the app about when to re-render the JSX code.

It will be re-renders automatically whenever the change occurs in redux or state.

But, We must have to be assured that we are not mutating the data in our state or redux, We always have to assign a new object to state or redux.

You can try the below changes in your code,

function Tabs ({ user })  {  
    const { isLogged } = useSelector((state) => state?.data)

    return (
        <Stack.Navigator >
            {
                isLogged
                ?
                    <Stack.Screen
                        name="loginScreen1"
                        component={HomeScreen}
                        options={{ headerShown: false }}
                    />
                :
                    <Stack.Screen
                        name="main"
                        component={MyTabs}
                        options={{ headerShown: false }}
                    />
            }
        </Stack.Navigator>
    )
}

Answer 2

App navigator need to subscribe isLogged state then rerender accordingly.

import { useEffect } from "react";
import { useSelector } from "react-redux";

const App = () => {
  const isLogged = useSelector((state) => state.isLogged);

  // Track authentication state
  useEffect(() => {}, [isLogged]);

  return (
    <Stack.Navigator>
      {!isLogged ? (
        <Stack.Screen
          name="loginScreen1"
          component={HomeScreen}
          options={{ headerShown: false }}
        />
      ) : (
        <Stack.Screen
          name="main"
          component={MyTabs}
          options={{ headerShown: false }}
        />
      )}
    </Stack.Navigator>
  );
};