React Native Router Flux (react-native-router-flux) - 在 reducer 中调用动作答案

【问题标题】：React Native Router Flux (react-native-router-flux) - call action in reducerReact Native Router Flux (react-native-router-flux) - 在 reducer 中调用动作
【发布时间】：2016-09-27 07:18:30
【问题描述】：

我有一个关于从减速器调用动作或只是重定向到另一个场景的问题。我想在用户成功登录后重定向到一个场景。我的 action.js 使用了“redux-api-middleware”模块：

action.js

export const LOGIN_REQUEST = 'LOGIN_REQUEST';
export const LOGIN_SUCCESSFUL = 'LOGIN_SUCCESSFUL';
export const LOGIN_FAILED = 'LOGIN_FAILED';

export function login(data) {
  return {
    [CALL_API]: {
      endpoint: API_ROOT + 'login',
      method: 'POST',
      types: [LOGIN_REQUEST, LOGIN_SUCCESSFUL, LOGIN_FAILED],
      body: JSON.stringify(data)
    }
  }
}

reducer.js

function login(state = initalstate, action){

  switch (action.type) {

    case LOGIN_REQUEST:

        return {
            ...state,
          isFetching: true
        };

    case LOGIN_FAILED:

        return {
            ...state,
          error: action.error,
          isFetching: false
        };

    case LOGIN_SUCCESSFUL:

        return {
            ...state,
          error: null,
          isFetching: false
        };  

      break;

    default:
      return state;

  }

}

现在，如果我收到LOGIN_SUCCESSFUL，我想调用 ActionsMY_SCENE_KEY 之类的操作来重定向到下一个屏幕。当我在 reducer 中调用 Actions 时出现一些错误，这可能是错误的方法。

【问题讨论】：

标签： reactjs react-native redux react-redux react-native-router-flux

【解决方案1】：

你不应该用你的 reducer 触发动作。您有 2 个选项：

1) 当您的用户成功登录后，您可以在您的状态中反映出来：

case LOGIN_SUCCESSFUL:

    return {
        ...state,
      error: null,
      isFetching: false,
      loggedIn: true,
    };

这样，在连接到您的状态的容器中，您可以检查此 state.loggedIn 值并通过调度您的转换操作来相应地触发转换。

2) 当您处理登录 API 响应时，在成功回复时，您可以简单地调度转换场景动作以重定向到下一个屏幕（您可以将其与成功的登录动作调度结合起来）。

【讨论】：