在 RN 应用程序中使用 Redux 反应导航答案

【问题标题】：React Navigation with Redux in RN app在 RN 应用程序中使用 Redux 反应导航
【发布时间】：2018-01-05 22:32:45
【问题描述】：

我在一个 RN 应用程序中使用 Redux。如何在用户登录时重定向用户？我应该把代码放在哪里： ActionCreator 或 Reducer ？对不起，这个新手（ps：我知道 auth 正在使用 console.log）

这里是动作创建者

export const loginUser = ({email, password}) => {
  return (dispatch) => {
    Meteor.loginWithPassword(email, password, (error) => {
      if (error) {
        console.log('erreur dans le sign in')
        return dispatch ({type: LOGIN_USER_FAIL, payload: email});
      } else {
        console.log('pas d erreur dans le signin')
        return dispatch({type: LOGIN_USER_SUCCESS, payload: email });
      };
    });
  };
};

还有 AuthReducer

export default (state= INITIAL_STATE, action) => {
  //console.log(action);
  switch (action.type) {
    case EMAIL_CHANGED:
      console.log('Changed!')
      return {...state, email: action.payload}; // {...state} => so the object is updated

    case PASSWORD_CHANGED:
      console.log('password changed')
      return{...state, password: action.payload};

    case LOGIN_USER_FAIL:
      console.log('from login user fail reducer');
      return {...state, email:'fail'};

    case LOGIN_USER_SUCCESS:
      console.log('from login user success reducer');
      return {...state, email:'success'}

    default:
      return state;
  }
};

【问题讨论】：

标签： meteor react-native redux redux-thunk

【解决方案1】：

就我个人而言，我在 Action Creator 中根据 API 请求等的结果处理路由。

具体方法取决于您使用的路由器。

export const loginUser = ( {email, password, navigator})=>{

    return (dispatch)=>{
          Meteor.loginWithPassword(email, password, (error) => {
          if (error) {
            console.log('erreur dans le sign in')
            return dispatch ({type: LOGIN_USER_FAIL, payload: email});
          }else{
            console.log('pas d erreur dans le signin')
            dispatch({type: LOGIN_USER_SUCCESS, payload: email });

            // Route to new location
            return navigator.replace(Router.getRoute('accounts', { fromLogin: true }))
          };
        });
    };
};

【讨论】：

@Sonia 听起来您真正的问题是与您的导航代码本身有关，而不仅仅是从哪里启动导航操作。从不同位置触发时导航是否有效？您是否将 navigate 函数传递给您的动作创建者？也许您应该修改问题或提供您的反应导航设置的详细信息，这可能会让您收到更好的答案。
@Sonia 如果当前答案之一满足您的问题，请接受其中之一吗？
Rob，导航实际上是在不同的位置工作的。也许我应该使用导航减速器？

【解决方案2】：

进行重定向的最佳位置是在您的操作创建器中。
因为它只会在登录成功的那一刻触发，代码会更干净。

export const loginUser = ({email, password}) => {
  return (dispatch) => {
    Meteor.loginWithPassword(email, password, (error) => {
      if (error) {
        console.log('erreur dans le sign in')
        return dispatch({type: LOGIN_USER_FAIL, payload: email});
      } else {
        console.log('pas d erreur dans le signin')
        // Your code to redirect
        return dispatch({type: LOGIN_USER_SUCCESS, payload: email});
      };
    });
  };
};

在你的 reducer 中不是一个好主意，因为它的目的只是处理 de app 状态。

另一种选择是在您请求登录的组件中进行重定向。

componentWillReceiveProps (nextProps) {
  if (nextProps.email === 'success') {
    // Your code to redirect
  }
}

【讨论】：