dispatchin action redux 后导航与 react native

Question

在发送登录操作后，我尝试使用 redux 引入身份验证反应原生应用程序。登录屏幕中的代码：

const dispatch = useDispatch();
const auth = useSelector(state => state.authentication);

const onSubmit = (data: {email: string; password: string}) => {
  dispatch(loginUser(data));
  auth.isAuth && navigation.navigate('Home');
};

动作登录的代码是：

export const loginUser = data => async dispatch => {
  try {
    const res = await axios({
      method: 'post',
      url: `${API_URl}/auth/login`,
      data,
    });
    dispatch({type: LOGIN_SUCCESS, payload: res.data});    
  } catch (error) {
    dispatch({type: GET_ERRORS, payload: error.response.data});
    dispatch({type: LOGIN_FAILED, payload: error.response.data});
  }
};

reducer 的代码在上面：

 case LOGIN_SUCCESS:
 case REGISTER_SUCCESS:
      return {
        ...state,
        user: payload.user,
        isAuth: true,
        message: null,
      };

我想导航到另一个屏幕“主页”，但这不是在发送登录操作后第一次完成，尽管我已验证状态已更改： enter image description the console after press login button

Answer 1

您正在调用onSubmit，它调用loginUser。不过在loginUser，你有一个异步的API调用，这意味着在你调用loginUser之后，auth.isAuth将永远是假的。

您需要确保在登录屏幕的componentDidMount 上显示auth.isAuth === true，或者使用redux-observable 之类的东西来响应正在调度的操作并执行导航。