React和Redux:行动后重定向

Question

我使用React/Redux开发了一个网站,我使用thunk中间件来调用我的API.我的问题涉及行动后的重定向.

我真的不知道如何以及在哪里可以进行重定向:在我的操作中,在reducer中,在我的组件中,......？

我的动作如下:

export function deleteItem(id) {
    return {
        [CALL_API]: {
            endpoint: `item/${id}`,
            method: 'DELETE',
            types: [DELETE_ITEM_REQUEST, DELETE_ITEM_SUCCESS, DELETE_ITEM_FAILURE]
        },
        id
    };
}

react-redux 已经在我的网站上实现,我知道我可以如下所示,但如果请求失败,我不想重定向使用:

router.push('/items');

谢谢!

Answer 1

绝对不要从你的减速器重定向,因为它们应该是副作用免费的.看起来你正在使用api-redux-middleware,我认为它没有成功/失败/完成回调,我认为这对于库来说是一个非常有用的功能.

在这个来自中间件回购的问题中,回购所有者建议这样的事情:

// Assuming you are using react-router version < 4.0
import { browserHistory } from 'react-router';

export function deleteItem(id) {
  return {
    [CALL_API]: {
      endpoint: `item/${id}`,
      method: 'DELETE',
      types: [
        DELETE_ITEM_REQUEST, 
        {
          type: DELETE_ITEM_SUCCESS,
          payload: (action, state, res) => {
            return res.json().then(json => {
              browserHistory.push('/your-route');
              return json;
            });
          },
        },
        DELETE_ITEM_FAILURE
      ]
    },
    id
  }
};

我个人更喜欢在我的连接组件的道具中有一个标志,如果为真,将路由到我想要的页面.我会像这样设置componentWillReceiveProps:

componentWillReceiveProps(nextProps) {
  if (nextProps.foo.isDeleted) {
    this.props.router.push('/your-route');
  }
}

Answer 2

最简单的解决方案

您可以使用 react-router-dom 版本 * 5+它实际上是建立在react-router核心之上的。

用法：

您需要从 react-router-dom导入useHistory钩子并直接将其传递到您的动作创建者函数调用中。

导入和创建对象

import { useHistory } from "react-router-dom";

const history = useHistory();

组件中的动作调用：

dispatch(actionName(data, history));

Action Creator 现在，您可以在 action creator 中访问 history 对象作为函数参数。

function actionName(data, history) {}

Answer 3

通常,更好的做法是在组件中重定向,如下所示:

render(){
   if(requestFullfilled){
       router.push('/item')
   }
   else{
       return(
          <MyComponent />
       )
   }
}