使用 React-Router 4 和 Redux-Promise 重定向用户答案

【问题标题】：Redirect user with React-Router 4 and Redux-Promise使用 React-Router 4 和 Redux-Promise 重定向用户
【发布时间】：2018-02-18 16:09:21
【问题描述】：

我有一个简单的用例，在 React-Router 4 和 Redux 环境中似乎很难实现。

当用户登录时，会触发 redux 承诺操作，该操作会返回 API 令牌、到期日期和其他一些信息。何时以及如果实现了承诺，我希望将用户重定向到另一个页面。

我无法弄清楚如何使用上述架构以编程方式重定向用户。想在Action.js里面做，但是感觉只能在Reducers.js里面做。即使我不确定如何开始。

到目前为止，我发现的最佳方法是在我的视图中添加一个 Redirect 组件，并让 promise 将 loggedIn 状态设置为 true，如果该视图上的 loggedIn 道具为 true，它将返回重定向道具，然后将用户重定向到所需的页面。不知何故，这感觉像是一个简单用例的大量额外代码。

任何建议都会有所帮助。谢谢。

Action.js：

import axios from 'axios';

export function login(email, password) {
  return {
    type: 'LOGIN_USER',
    payload: axios.post('http://localhost:3114/api/users/authenticate', 
    {
      email,
      password,
    }),
  };
}

Reducers.js

// Promise
// pending
// fulfilled
// rejected
const initalState = {
  token: null,
  expiryDate: '',
  loading: false,
  error: null,
};

// REDCUER
function loginReducer(state = initalState, action) {
  switch (action.type) {
    case 'LOGIN_USER_PENDING':
      return { ...state, loading: true };
    case 'LOGIN_USER_FULFILLED':
      return {
        ...state,
        loading: false,
        token: action.payload.data.token,
        expiryDate: action.payload.data.expires,
        loggedIn: true,
      };
    case 'LOGIN_USER_REJECTED':
      return { ...state, loading: false, error: `${action.payload}` };
    default:
      return state;
  }
}

export default loginReducer;

LoginView.js

render() {
        const { data, login, loggedIn } = this.props;
        if (data.loggedIn) {
          return <Redirect to="/users" push />;
        }
        return (
          ...
        )
       }

问候，埃米尔

【问题讨论】：

像我建议的那样，history.push 运气好吗？
@jonahe 感谢您的跟进。一天之内就会告诉你。目前正在处理 3 个项目，有点杂耍。

标签： redux react-redux react-router-v4 redux-promise redux-promise-middleware

【解决方案1】：

我可以看到 Redux 状态中的 isLoggedIn 可能在以后有用（例如，您可以将所有应该只对登录用户可见的路由/页面包装在一个检查此 isLoggedIn 的组件中并可能重定向到登录页面），所以我不一定会在那里改变任何东西。

但如果您仍想找到另一种解决方法，则可以使用history.push(newUrl) or history.replace(newUrl) 以编程方式重定向（无需渲染重定向组件）。但我不确定你会在哪里称呼它。与在 reducer 中相比，在动作创建器中出现副作用对我来说似乎稍微不那么奇怪，所以一种可能性可能是做类似

的事情

import axios from 'axios';

// pushOnResolve would be something like () => push('mynew/url')
export function login(email, password, pushOnResolve) {
  const promise = axios.post('http://localhost:3114/api/users/authenticate';
  // it's possible to have several .then on a promise
  // so this shouldn't interfere with
  // the Redux-promise or the LOGIN_USER_FULFILLED reducer
  promise.then(pushOnResolve);

  return {
    type: 'LOGIN_USER',
    payload: promise, 
    {
      email,
      password,
    }),
  };
}

【讨论】：