在Redux中间件中实现重定向

时间:2016-08-09 20:02:25

标签: redirect reactjs redux react-router-redux

假设我有以下行动:

export function signIn(data) {
  return {
    type: USER_SIGN_IN,
    promise: api.post('/sign_in', data)
  }
}

以及以下中间件:

export default function promiseMiddleware() {
  return next => action => {
    const { promise, type, ...rest } = action

    if (!promise) {
      return next(action)
    }

    const SUCCESS = `${type}_SUCCESS`
    const REQUEST = `${type}_REQUEST`
    const ERROR = `${type}_ERROR`

    next({ type: REQUEST, ...rest })

    return promise
      .then(res => {
        next({ response: res.data, type: SUCCESS, ...rest })
        return true
      })
      .catch(error => {
        ...
      })
  }
}

此代码基于https://github.com/reactGo/reactGo/

但是如果在调用then之后next回调,我想重定向到另一条路径会怎么样?

我做了以下。我通过动作传递了重定向网址:

export function signIn(data) {
  return {
    type: USER_SIGN_IN,
    promise: api.post('/sign_in', data),
    redirect: '/'
  }
}

并添加了来自next push的{​​{1}}方法的另一个调用。

react-router-redux

它似乎有效,但我不确定这是不是一个好主意,或者是否存在多个import { push } from 'react-router-redux' export default function promiseMiddleware() { return next => action => { const { promise, type, redirect, ...rest } = action ... return promise .then(res => { next({ response: res.data, type: SUCCESS, ...rest }) next(push(redirect)) return true }) .catch(error => { ... }) } } 来电的陷阱,我不应该这样做?

也许有更好的方法来实现这样的重定向?

0 个答案:

没有答案