title: How to show toast just after dispatching a successful action in react native
body: <p>I am working on an authentication system. Here when user enter wrong password i want to show toast but the problem it the way i am doing its not working.</p>
  <p>I am using react-redux for state management In my app.</p>
  <p>Here is how my login flow works
  Here when login button is pressed it dispatches <code>getLogin</code> action, if it gets error from server side it sends loginError which is a string. That's why i am check it here. <code>LoginError</code> is coming from redux store and <code>loginSuccess</code> as well.</p>
  <blockquote>
  <p>Login.tsx</p>
  </blockquote>
  <pre><code>const { width: wWidth, height: wHeight } = Dimensions.get(&quot;window&quot;);
  
  
  
  const validationSchema = Yup.object().shape({
    password: Yup.string().required(),
    email: Yup.string().email().required(),
  });
  
  const Login = ({ navigation, getLogin, authentication }: LoginProps) =&gt; {
    const { toast } = useToast();
    const { loginLoading, loginSuccess, loginError } = authentication;
  
    const {
      handleChange,
      handleBlur,
      handleSubmit,
      values,
      errors,
      touched,
      setFieldValue,
    } = useFormik({
      validationSchema,
      initialValues: {
        password: &quot;&quot;,
        email: &quot;&quot;,
        callback: false,
      },
      onSubmit: async (values) =&gt; {
        getLogin(values.email, values.password, navigation);
      },
    });
  
    if (loginError !== &quot;&quot; &amp;&amp; loginSuccess === &quot;&quot;) {
      console.log(&quot;HelloFromIf&quot;);
      toast({
        message: &quot;Wrong username or password!&quot;,
        bg: &quot;background&quot;,
        color: &quot;text&quot;,
        accentColor: &quot;main&quot;,
        iconFamily: &quot;Feather&quot;,
        iconName: &quot;alert-triangle&quot;,
        iconColor: &quot;error&quot;,
      });
    }
    return (
      &lt;Box
        backgroundColor=&quot;primaryText&quot;
        flex={1}
        justifyContent=&quot;center&quot;
        alignItems=&quot;center&quot;
      &gt;
        &lt;Box
          justifyContent=&quot;center&quot;
          alignItems=&quot;center&quot;
          height={wHeight / 2}
          width={wWidth}
          flex={1}
        &gt;
          &lt;Box style={{ marginTop: 100 }} height={wHeight / 3} width={wWidth / 2}&gt;
            &lt;Image
              style={{ height: &quot;100%&quot;, width: &quot;100%&quot; }}
              source={require(&quot;../../../assets/login-logo.png&quot;)}
            /&gt;
          &lt;/Box&gt;
        &lt;/Box&gt;
        &lt;Box
          borderTopLeftRadius=&quot;l&quot;
          borderTopRightRadius=&quot;l&quot;
          width={wWidth}
          backgroundColor=&quot;iconBackground&quot;
          flex={1}
        &gt;
          &lt;Box marginHorizontal=&quot;l&quot;&gt;
            &lt;Box&gt;
              &lt;TextField
                onChangeText={handleChange(&quot;email&quot;)}
                placeholder=&quot;email&quot;
                onBlur={handleBlur(&quot;email&quot;)}
                error={errors.email}
                touched={touched.email}
              /&gt;
            &lt;/Box&gt;
            &lt;Box&gt;
              &lt;TextField
                secureTextEntry={true}
                placeholder=&quot;Password&quot;
                onChangeText={handleChange(&quot;password&quot;)}
                onBlur={handleBlur(&quot;password&quot;)}
                error={errors.password}
                touched={touched.password}
              /&gt;
            &lt;/Box&gt;
            &lt;LargeButton
              loading={loginLoading}
              onPress={handleSubmit}
              label={&quot;LOGIN&quot;}
            /&gt;
            &lt;Box paddingVertical=&quot;m&quot; alignItems=&quot;center&quot;&gt;
              &lt;TouchableWithoutFeedback&gt;
                &lt;Text variant=&quot;seeAll&quot;&gt;Forgot Password ?&lt;/Text&gt;
              &lt;/TouchableWithoutFeedback&gt;
            &lt;/Box&gt;
  
            &lt;Box paddingVertical=&quot;m&quot; alignItems=&quot;center&quot;&gt;
              &lt;TouchableWithoutFeedback
                onPress={() =&gt; navigation.navigate(&quot;SignUp&quot;)}
              &gt;
                &lt;Text variant=&quot;seeAll&quot;&gt;Create new account!&lt;/Text&gt;
              &lt;/TouchableWithoutFeedback&gt;
            &lt;/Box&gt;
          &lt;/Box&gt;
        &lt;/Box&gt;
      &lt;/Box&gt;
    );
  };
  
  function mapStateToProps(state: any) {
    return {
      authentication: state.auth,
    };
  }
  
  const mapDispatchToProps = (dispatch: any) =&gt; {
    return {
      getLogin: (email: string, password: string, navigation: any) =&gt;
        dispatch(userLogin(email, password, navigation)),
    };
  };
  
  export default connect(mapStateToProps, mapDispatchToProps)(Login);
  </code></pre>
  <blockquote>
  <p>authAction.tsx</p>
  </blockquote>
  <pre><code>export const userLogin = (email: string, password: string, navigation: any) =&gt; (
    dispatch: any
  ) =&gt; {
    dispatch({
      type: LOGIN_USER_LOADING,
    });
    const base64 = require(&quot;base-64&quot;);
    const hash = &quot;Basic &quot; + base64.encode(&quot;karthik:karthik&quot;);
    let data = new FormData();
    data.append(&quot;username&quot;, email);
    data.append(&quot;password&quot;, password);
    data.append(&quot;grant_type&quot;, &quot;password&quot;);
    let config: AxiosRequestConfig = {
      method: &quot;post&quot;,
      url: _login_user,
      headers: {
        Authorization: hash,
      },
      data: data,
    };
    axios(config)
      .then((res: AxiosResponse) =&gt; {
        dispatch({
          type: LOGIN_USER_SUCCESS,
          payload: res.data,
        });
        const _rest = new restServices();
        _rest.saveToken(res.data);
        navigation.navigate(&quot;Home&quot;);
      })
      .catch((err) =&gt; {
        dispatch({
          type: LOGIN_USER_ERROR,
          error: err,
        });
      });
  };
  </code></pre>
  <blockquote>
  <p>authReducer.tsx</p>
  </blockquote>
  <pre><code>import {
    LOGIN_USER_LOADING,
    USER_SIGN_UP_ERROR,
    USER_SIGN_UP_LOADING,
  } from &quot;./../actions/constants/authConstant&quot;;
  import {
    LOGIN_USER_SUCCESS,
    LOGIN_USER_ERROR,
    LOGOUT_USER,
  } from &quot;../actions/constants/authConstant&quot;;
  import { USER_AUTHORIZED } from &quot;../actions/constants/authConstant&quot;;
  import { USER_SIGN_UP } from &quot;../actions/constants/authConstant&quot;;
  
  export type AuthState = {
    readonly isAuthenticated: boolean;
    readonly userData: {};
    readonly loginLoading: boolean;
    readonly loginSuccess: string;
    readonly loginError: string;
  
  };
  
  const initialState: AuthState = {
    isAuthenticated: false,
    userData: {},
    loginLoading: false,
    loginSuccess: &quot;&quot;,
    loginError: &quot;&quot;,
  
  };
  
  const authReducer = (state = initialState, action: any) =&gt; {
    switch (action.type) {
      
      case LOGIN_USER_LOADING:
        return {
          ...state,
          loginLoading: true,
          isAuthenticated: false,
          loginError: &quot;&quot;,
          loginSuccess: &quot;&quot;,
        };
  
      case LOGIN_USER_SUCCESS:
        return {
          ...state,
          isAuthenticated: true,
          loginLoading: false,
          userData: action.payload,
          loginError: &quot;&quot;,
          loginSuccess: &quot;User Logged In.&quot;,
        };
      case LOGIN_USER_ERROR:
        return {
          ...state,
          loginLoading: false,
          loginError: action.error,
          loginSuccess: &quot;&quot;,
        };
      
      default:
        return {
          ...state,
        };
    }
  };
  
  export default authReducer;
  </code></pre>
  <p>I am not sure weather i am doing it right or wrong please help me solve this issue. This toast show even when login is successfull.</p>