Question

我是React的新手，具有Redux结构及其概念。在我的应用程序中，我需要在登录后导航操作中的特定路径。我的行动代码是：

const login = (resp:Object) => (dispatch: any) =>{
     // api call
     if(apiCall is success){
     window.location.href = "http://localhost:3000"+localStorage.getItem("pathBeforeLogin");
     }
     else{
       window.location.href = "http://localhost:3000/login";
    }
  });
}

此代码工作正常，但我的大四学生要求我在不使用window.location.href的情况下完成这项工作。由于我们使用的是react-router v4，因此browserHistory.push也无效。

Answer 1

react-router-redux提供了一个Redux中间件，允许您通过Redux操作进行导航。

来自https://github.com/reactjs/react-router-redux：

import { createStore, combineReducers, applyMiddleware } from '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'));

因此，在您的示例中，您不必将字符串分配给window.location.href，而是执行以下操作：

store.dispatch(push('/login'));

如何使用Redux应用程序

1 个答案: