Javascript 成功执行异步redux操作时转换到另一个路由

我有一组非常简单的react组件：

• 容器

  ，该容器钩住并处理操作、存储订阅等

• 列表

  显示我的项目列表

• new

  这是向列表中添加新项目的表单

我有以下几条路线：

<Route name='products' path='products' handler={ProductsContainer}>
  <Route name='productNew' path='new' handler={ProductNew} />
  <DefaultRoute handler={ProductsList} />
</Route>

---

这是正确的方法吗？还是我应该以某种方式触发另一个操作来触发路由更改？

我最终创建了一个超级简单的中间件，大致如下所示：

import history from "../routes/history";

export default store => next => action => {

    if ( ! action.redirect ) return next(action);

    history.replaceState(null, action.redirect);
}

---

因此，您只需要确保您的

成功

操作具有

重定向

属性。还要注意，此中间件不会触发

next（）

。这是故意的，因为路由转换应该是操作链的末端。

如果您不想使用更完整的解决方案，例如，您可以使用它来编写如下代码：

export function login() {
  return {
    type: LOGGED_IN,
    payload: {
      userId: 123
    }
    meta: {
      transition: (state, action) => ({
        path: `/logged-in/${action.payload.userId}`,
        query: {
          some: 'queryParam'
        },
        state: {
          some: 'state'
        }
      })
    }
  };
}

---

这类似于，但稍微复杂一点。它仍然在引擎盖下使用相同的库，因此与React Router兼容。

对于那些使用中间件API层来抽象其对类似内容的使用，并且碰巧正在使用的用户，您可以简单地将

调度

承诺链接到您的操作中，如下所示：

import { push } from 'react-router-redux';
const USER_ID = // imported from JWT;

function fetchUser(primaryKey, opts) {
    // this prepares object for the API middleware
}

// this can be called from your container
export function updateUser(payload, redirectUrl) {
    var opts = {
        method: 'PUT',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(payload)
    };
    return (dispatch) => {
        return dispatch(fetchUser(USER_ID, opts))
            .then((action) => {
                if (action.type === ActionTypes.USER_SUCCESS) {
                    dispatch(push(redirectUrl));
                }
            });
    };
}

这减少了按建议将库添加到代码中的需要，还可以很好地将您的操作与其重定向（如中所做）放在一起

以下是我的店铺的外观：

import { createStore, applyMiddleware } from 'redux';
import rootReducer from '../reducers';
import thunk from 'redux-thunk';
import api from '../middleware/api';
import { routerMiddleware } from 'react-router-redux';

export default function configureStore(initialState, browserHistory) {
    const store = createStore(
        rootReducer,
        initialState,
        applyMiddleware(thunk, api, routerMiddleware(browserHistory))
    );

    return store;
}

---

我知道我来晚了一点，因为react导航已经包含在react原生文档中，但对于在应用程序中使用/使用Navigator api的用户来说，它仍然很有用。 我尝试的是一点小技巧，只要renderScene发生，我就在对象中保存navigator实例-

renderScene(route, navigator) {
      const Component = Routes[route.Name]
      api.updateNavigator(navigator); //will allow us to access navigator anywhere within the app
      return <Component route={route} navigator={navigator} data={route.data}/>

}

现在，在你的行动中，你可以简单地调用

push（{Name:'routeName'， 数据：无论你想通过什么）

您只需要从模块导入api。

如果您使用的是and，那么我认为它提供了一个很好的解决方案

以下是我使用的步骤：

• 通过在react router
  组件内呈现组件或使用

  withRouter

  创建更高阶组件，将react router

  历史记录

  道具传递给组件
• 接下来，创建您要重定向到的路由（我称之为我的

  to

  ）
• 第三，使用

  history

  和

  to

  调用redux操作
• 最后，当您想要重定向时（例如，当您的redux操作解决时），调用

  history.push（to）

---

你看了吗？它在redux中存储路由器存储，这样你就可以在redux操作中触发路由更改。我已经看了

redux react router

，这将需要一个大的重构，因此可能需要等待。如果我同时提出一个解决方案，我将发布一个answer@Dmitry那么问题是你从哪里触发一次性道具（如未经认证的旗帜）更新。componentWillReceiveProps？这真的有效吗？因为它对我不起作用，因为url被重定向，但我在页面中的内容没有改变。即使url被更改，它也会显示相同的页面。你在使用路由器吗？哪个路由器和什么插件？此代码是用React router和React router Redu编写的x in mind这对我很有用，但对于像我这样想知道函数

push

从何而来的人来说，你的商店中必须包含

routerMiddleware

：

import{push}从“react router redux”

到thunk中间件不起作用？如果从“LOGIN\u STARTED”到“LOGIN\u SUCCESSFUL”并且不调用next，则不会发生任何事情。这是最小的工作解决方案。感谢分享。这里的

。/routes/history

是什么？这里的../router/history是什么？这仍然有效吗？它需要一个逗号在

payload:{userId:123}

renderScene(route, navigator) {
      const Component = Routes[route.Name]
      api.updateNavigator(navigator); //will allow us to access navigator anywhere within the app
      return <Component route={route} navigator={navigator} data={route.data}/>

}

'use strict';

//this file includes all my global functions
import React, {Component} from 'react';
import {Linking, Alert, NetInfo, Platform} from 'react-native';
var api = {
    navigator,
    isAndroid(){
        return (Platform.OS === 'android');
    },
    updateNavigator(_navigator){
      if(_navigator)
          this.navigator = _navigator;
    },
}

module.exports = api;