Question

在我的React / Redux应用程序中，我有一些异步操作。假设用户向服务器发起getData请求。立即调度GET_DATA_REQUEST并且getData AJAX调用正在前往服务器。

成功或失败后，将相应地调度GET_DATA_SUCCESS或GET_DATA_FAILURE个操作，并将数据呈现给用户界面。

现在，我希望我的应用程序推送历史状态（使用react-router-redux）作为对AJAX回调的反应。意思是，成功后，用户被重定向＆＃34;到另一个URL（路由），显示一个取决于新接收数据的不同模块。

我意识到在减速器中使用此功能是一个非常糟糕的想法，因为它不再是纯粹的（URL更改是副作用）。

有什么想法吗？

由于

Answer 1

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

首先，您应该在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
      }

然后，在连接到reducer的组件中，你应该检查＆＃34; redirect＆＃34;的值。在componentDidUpdate函数中。

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

最后，你应该重置＆＃34;重定向＆＃34;在componentWillUnmount

希望它有所帮助！

Answer 2

另一种很好的方法。我从this Udemy course学到了这一点，我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）是一位优秀的老师，这是好心的！

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

Redux - 调度异步操作时更改URL

2 个答案: