Redux

Question

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

无论成功或失败，都会相应地调度 GET_DATA_SUCCESS 或 GET_DATA_FAILURE 操作，并将数据呈现给 UI。

现在，我希望我的应用程序推送历史状态（使用 react-router-redux）作为对 AJAX 回调的反应。意思是，成功后，用户 "redirected" 到另一个 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 的组件中，你应该检查 componentDidUpdate 函数中 "redirect" 的值。

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

最后，您应该在 componentWillUnmount

上重置 "redirect"

希望对您有所帮助！

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

Redux - Change URL when an async action is dispatched

reactjs

react-router

redux-thunk

react-router-redux