reactjs - React-router-redux 推送操作不起作用

Question

一旦身份验证成功，我将尝试导航到主页，我正在使用 redux-saga 进行 API 调用。下面是我的登录生成器函数:

 import * as Type from '../actions/types';
import { takeLatest, put, call } from 'redux-saga/effects';
import firebase from 'firebase';
import { push } from 'react-router-redux';


function* loginUser(action) {
    const auth = firebase.auth();

    try{
        console.log(action.user);
        const result = yield call([auth, auth.signInWithEmailAndPassword], action.user.email, action.user.password);
        console.log('login sucess');
        yield put({type: Type.AUTH_SUCCESSFULL, user: action.user, authMessage:'Login Success'});
        console.log('done');  //being logged
        yield put(push('/home')); /not being redirected to home. Even the browser url is not changing
        console.log('pushed'); //being logged
    }
    catch(error){
      console.log(error.message);
      yield put({type: Type.AUTH_FAILED, errorMessage: error.message});
    }
 }

我刚刚安装了react-router-redux并尝试这样做，有人可以告诉我我做错了什么吗？

Answer 1

我遇到了同样的问题，以下是我的解决方案。您添加的代码没有问题。您需要做一些额外的工作才能完成这项工作。

Reducer.js

import { combineReducers } from 'redux';
import { connectRouter } from 'connected-react-router';
import { History } from 'history'

const redusers = {
  ...
}

const mainReducer = (history: History) => combineReducers({
  router: connectRouter(history),
  ...redusers
})

export default mainReducer;

Store.js

import { createStore, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga';
import logger from 'redux-logger';
import { createBrowserHistory } from 'history'
import { routerMiddleware } from 'connected-react-router'

import mainReducer from './mainReducer';
import rootSaga from './rootSaga';

export const history = createBrowserHistory()

const configureStore = (preloadedState?: any) => {
  const sagaMiddleware = createSagaMiddleware();
  const store = createStore(
    mainReducer(history),
    preloadedState,
    applyMiddleware(routerMiddleware(history), logger, sagaMiddleware),
  );
  sagaMiddleware.run(rootSaga);
  return store;
};

export default configureStore;

index.js

import React, { Suspense } from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';

import App from './App';
import * as serviceWorker from './serviceWorker';
import configureStore, { history } from './store';

const store = configureStore();
const app = (
    <Provider store={store}>
        <App history={history} />
    </Provider>
);

App.js - 仅添加了必要的代码行如下

...
import { History } from 'history'
import { ConnectedRouter } from 'connected-react-router'
...

const {history} = props;
...

return(){
   ...
   <ConnectedRouter history={history}>
      {routes}
   </ConnectedRouter>
   ...
}

在您的应用程序上设置上述内容后，它将按您想要的方式工作。

另一件事是我们不再在应用程序中使用 BrowserHistory，因为自定义历史记录已经实现。