2

在我的 React/Redux 应用程序中，我有一些异步操作。假设用户getData向服务器发起请求。立即发送 aGET_DATA_REQUEST并且getDataAJAX 调用正在发送到服务器的途中。

在成功或失败时，相应地分派一个GET_DATA_SUCCESS或GET_DATA_FAILURE动作，并将数据呈现给 UI。

现在，我希望我的应用程序推送历史状态（使用react-router-redux）作为对 AJAX 回调的反应。这意味着，成功后，用户将被“重定向”到另一个 URL（路由），显示依赖于新接收到的数据的不同模块。

我意识到在 reducer 中拥有这个功能是一个非常糟糕的主意，因为它不再是纯粹的（URL 更改是一个副作用）。

有什么想法吗？

谢谢

4

2 回答 2

9

我相信这是处理您的情况的好方法。

首先，您应该在 reducer 中添加一个新属性，以了解您是否要重定向。

像这样的东西

const initialState = {
   ...
   redirect : false // You could use a String with the new url instead of true/false
   ....
}

switch ...
case GET_DATA_SUCCESS:
       return {
            ...state,
            redirect:true,
       }
case GET_DATA_FAILURE;
      return {
          ...state,
          redirect:false
      }

然后，在连接到减速器的组件中，您应该检查 componentDidUpdate 函数中“redirect”的值。

componentDidUpdate(){
        let {redirect} = this.props.yourReducerState;
        if(redirect === true){
            this.context.router.push("new-url");
        }
    }

最后，您应该在 componentWillUnmount 上重置“重定向”

希望能帮助到你！

于 2016-04-27T10:19:00.467 回答
7

另一种很好的方法来做到这一点。我从这个 Udemy 课程中学到了这一点，我 100% 推荐它。

在组件（您要提交的表单）内部，放置此表单提交事件处理程序，该处理程序将调用该操作。

submit(values) {
    this.props.xxxActionCreator(() => {
        this.props.history.push("/");//history is provided by react-route, .push("/") will direct app back to root path.
    });
}

render() { 
    <form onSubmit={this.submit.bind(this)} >
    .... </form>

在动作创建者里面，把这个

export default function xxxAction(callback) {
    const request = axios.get('...url').then(() => callback()); //here the function (callback) that was passed into this.props.xxxActionCreator() will be invoked.
    //.then() is provided by promise. This line of code means the callback (which redirects you to the root path) will be invoked, once the promise (async) is resolved.

    return { type: SOME_ACTION, payload: XXX };

GitHub demo在这里你可以找到相关代码和整个项目。由伟大的老师斯蒂芬·格里德（Stephen Grider）亲切介绍！

这是一种不会将重定向放入状态树的方法。

于 2017-07-28T23:53:03.677 回答