reactjs - Redux - 分派(dispatch)异步操作时更改 URL

Question

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

无论成功或失败，GET_DATA_SUCCESS 或 GET_DATA_FAILURE 操作都会相应地分派(dispatch)，并将数据呈现给 UI。

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

我意识到在 reducer 中加入这个功能是一个非常糟糕的想法，因为它不再是纯粹的(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 上重置“重定向”

希望对您有所帮助!