如何在 redux 的 action 里面使用 react-router 里的 history 对象?

Question

有一个很常见的需求, 在用户注册成功之后跳转到主页, 对应的action可能如下:

// SignupAction.js

export const signupRequest = (userData) => {
  return dispatch => {
    dispatch(signupPending())

    return axios.post('/api/user', userData)
      .then(res => dispatch(signupSuccess()))
      .then(() => {
        // history.push('/')
        // 这里该如何得到 history 对象?
      })
      .catch(error => dispatch(signupFailure(error.message)))
  }
}

可以看到, 在signupRequest这个 action 里面, 无法直接使用 react-router里面的history对象

当然我可以这样改, 比如给signupRequest添加第二个参数, 就是history对象本身: signupRequest(userData, history), 也可以传一个回调过去:signupRequest(userData, callback), 不知道使用哪种方法或者有更好的思路?

自己还想过另外一种, 之前代码都是将相关逻辑全部放到action里面, 也可以将逻辑放到组件内部处理, action里只做异步请求, 但是似乎这样就没有太多意义了, 比如代码可能是这样:

// signupAction.js

export const signupRequest = (userData) => {
  return dispatch => {
    return axios.post('/api/users', userData);
  }
}

// signupForm.js
export default class SignupForm extends Component {
  // ...
  handleSubmit = e => {
    const userData = e.target.value
    this.props.signupRequest(userData)
      .then(() => this.props.dispatch(signupSuccess()))
      .then(() => {
        // 这里可以使用 history 对象了
        this.props.history.push('/')
      })
      .catch(error => dispatch(signupFailure(error.message)))  }
}

不知道该使用哪种方法, 以及对于这一类问题有没有最佳实践(best practice?), 多谢!

Answer 1

搜到了答案就自问自答一下

实际上我就是想在全局得到history这个对象, 然而react-router里面, 使用<BrowserRouter>,<HashRouter>,<MemoryRouter>, 和<NativeRouter>, 一个history其实默认就已经帮你创建好了

当然其实也是可以直接手动创建的, 我搜了一下发现:

• https://github.com/ReactTrain...
• https://github.com/ReactTrain...

上面两个链接有提到, 直接贴解决办法的代码:

// history.js
import { createBrowserHistory } from "history";
export default createBrowserHistory();

// index.js
import { Router } from "react-router-dom";
import history from "./history";

ReactDOM.render(
  <Router history={history}>
    <App />
  </Router>,
  document.getElementById("root")
);

然后就能直接在任何地方引用这个history了...

// nav.js
import history from "./history";

export default function nav(loc) {
  history.push(loc);
}