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

Question

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

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

这里是删除功能：

export function deletePost(id){
    var request = axios.delete(`${ROOT_URL}posts/${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);
}

Answer 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_URL}posts/${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'));
        });
    }
}