useSelector() return undefined

Viewed 2053

I just learn react-native basic, and when work with redux, i have problem with useSelector , here is some of my code

Here is store component

//store.js
    initState = {
        loginStatus: false,
    }
    const LoginAction = (state = {initState}, action) => {
        if (action.type == 'changeLogin') {
            return { loginStatus:!state.loginStatus }
        }
        return state
    }
    const store = createStore(LoginAction, composeWithDevTools());
    export default store

Here is Login Function

function LoginScreen({ navigation, props }) {
 
 

     const dispatch = useDispatch()
      const Login = useSelector(state => {
        return state.LoginStatus
      })
    
      function getLogin() {
        return Login
      }
      function handleLogin() {
        dispatch({ type: 'changeLogin' })
      }
      console.log('Login ' + Login) // it return undefined

I have tried this method useSelector state returns undefined (React-Redux) but it didn't work! Here is screenshot of what happened enter image description here

But when i add that to login button, it return true, then continute to undefined

<Formik
        validateOnMount
        validationSchema={loginValidationSchema}
        initialValues={{ email: '', password: '' }}
        onSubmit={
          () => {
            handleLogin()
            console.log('When submit ' + Login) // true then undefined
            SetTimer();
          }
          // () => navigation.navigate('Login')
        }
      >

enter image description here

Please help , thank a lot

1 Answers

The casing is wrong in your selector. It should be return state.loginStatus. Also, your LoginAction is technically a reducer, not an action.

const Login = useSelector(state => {
  return state.loginStatus
})

Edit: An additional issue in the reducer is the initial state has initState as the top-level key in the object, when the intent is just for it to be assigned directly:

const LoginAction = (state = initState, action) = {
  // reducer code here
}
Related