动作redux后反应路由器重定向

Question

我正在使用react-redux和标准的react-routing.我需要在明确的行动后重定向.

例如:我已经注册了几个步骤.行动结束后:

function registerStep1Success(object) {
    return {
        type: REGISTER_STEP1_SUCCESS,
        status: object.status
   };
}

我希望他使用registrationStep2重定向到页面.怎么做？

ps在历史浏览器中,'/ registrationStep2'从未出现过.此页面仅在成功结果registrationStep1页面后出现.

Answer 1

使用React Router 2+,无论您何时发送操作,都可以调用browserHistory.push()(或者hashHistory.push()如果您使用的话):

import { browserHistory } from 'react-router'

// ...
this.props.dispatch(registerStep1Success())
browserHistory.push('/registrationStep2')

如果您使用的话,也可以从异步操作创建器执行此操作.

Answer 2

你有没有检查过react-router-redux？该库可以将react-router与redux同步.

以下是有关如何使用react-router-redux的推送操作实现重定向的文档中的示例.

import { routerMiddleware, push } from 'react-router-redux'

// Apply the middleware to the store
const middleware = routerMiddleware(browserHistory)
const store = createStore(
  reducers,
  applyMiddleware(middleware)
)

// Dispatch from anywhere like normal.
store.dispatch(push('/foo'))

Answer 3

路由器版本 4+ 的最简单解决方案：我们使用 "react-router-dom": "4.3.1" 它不适用于版本 5+

从初始化的位置导出浏览器历史记录并使用 browserHistory.push('/pathToRedirect')：

必须安装包历史记录（例如：“history”：“4.7.2”）：

npm install --save history

在我的项目中，我在 index.js 中初始化浏览器历史记录：

import { createBrowserHistory } from 'history';

export const browserHistory = createBrowserHistory();

在动作中重定向：

export const actionName = () => (dispatch) => {
    axios
            .post('URL', {body})
            .then(response => {
                // Process success code
                  dispatch(
                    {
                      type: ACTION_TYPE_NAME,
                      payload: payload
                    }
                  );
                }
            })
            .then(() => {
                browserHistory.push('/pathToRedirect')
            })
            .catch(err => {
                // Process error code
                    }
                );
            });
};

Answer 4

为了构建 Eni Arinde 之前的答案（我没有评论的声誉），以下是如何store.dispatch在异步操作之后使用该方法：

export function myAction(data) {
    return (dispatch) => {
        dispatch({
            type: ACTION_TYPE,
            data,
        }).then((response) => {
            dispatch(push('/my_url'));
        });
    };
}

诀窍是在操作文件中而不是在减速器中执行此操作，因为减速器不应该有副作用。