成功或错误后如何使用 redux thunk 重定向？

Posted 2023-02-22

【中文标题】成功或错误后如何使用 redux thunk 重定向？

【英文标题】：How to use redux thunk to redirect after success or error?

【发布时间】：2017-08-18 00:36:11

【问题描述】：

我是 Promises 和 React 的新手。我在我的动作创建者中使用 redux-thunk 来解决承诺，我正在从我的组件中调用动作创建者。成功或不成功的请求完成后如何路由到不同的 URL？我附上了删除功能操作创建者的代码。

我应该在发送成功时使用参数 (routeTo) 设置状态吗？

这里是删除功能：

export function deletePost(id)
    var request = axios.delete(`$ROOT_URLposts/$id$API_KEY`);

    return function(dispatch)
        request.then((response)=>
            console.log("I deleted"+response.data.title);
        ).catch((error)=>
            console.log("DELETE_ERROR: "+JSON.stringify(error));
        );
    

我从组件中的 onclick 函数调用此函数。

deletePost()
    this.props.deletePost(this.props.params.id);

【参考方案1】：

我发现使用 redux 进行路由的最佳方法是考虑我的状态的 URI 部分，并将其存储在 redux 中。有一个优秀的库 react-router-redux 可以为您完成这项工作。

一旦你设置了 react-router-redux，你就可以发送动作来改变位置，所以你的 thunk 看起来像：

import  push  from 'react-router-redux';

export function deletePost(id)
    var request = axios.delete(`$ROOT_URLposts/$id$API_KEY`);

    return function(dispatch)
        request.then((response)=>
            console.log("I deleted"+response.data.title);
            dispatch(push('/delete-success-uri'));
        ).catch((error)=>
            console.log("DELETE_ERROR: "+JSON.stringify(error));
            dispatch(push('/delete-fail-uri'));
        );
    

【讨论】：

谢谢！我打算为此在减速器中创建案例，但感觉太hacky了。