dispatchin action redux 后导航与 react native

Posted 2023-02-16

【中文标题】dispatchin action redux 后导航与 react native

【英文标题】：navigation after dispatchin action redux with react native

【发布时间】：2022-01-02 08:00:44

【问题描述】：

在发送登录操作后，我尝试使用 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

【参考方案1】：

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

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

【讨论】：

我尝试使用 useEffect 中的身份验证和导航验证，依赖数组为 emty，但问题仍然存在。

看看 react-navigation 文档对身份验证流程的看法：reactnavigation.org/docs/auth-flow