React redux react-router, react-router-redux how to do a redirect after the login?

Question

React redux react-router, react-router-redux how to do a redirect after the login?

I can not figure out where better to do a redirect after the user successfully logged in. Thought it correct to do in a action like this:

import { push } from 'react-router-redux';

export function login(userData) {
 return dispatch => {
dispatch(requestLogin());

 return fetchBlabla(user)
 .then((json) => {
dispatch(successLogin(json));
dispatch(push('/'));
});
}
}

but in this case, the address bar changes but the content remains unchanged.
Initialization code Stora

import React from 'react';

import { createStore, combineReducers, compose applyMiddleware } from 'redux';
import { routerReducer, routerMiddleware } from 'react-router-redux';
import thunkMiddleware from 'redux-thunk';
import * as reducers from './reducers';

export function configureStore(history, initialState) {

 const reducer = combineReducers({
...reducers,
 routing: routerReducer
});

 const store = createStore(
reducer,
initialState,
compose(
applyMiddleware(
thunkMiddleware,
routerMiddleware(history)
),
 window.devToolsExtension ? window.devToolsExtension() : f => f
)
);

 return store;
};

nick_Marks79 asked July 8th 19 at 15:49

Related questions

More answers about "React redux react-router, react-router-redux how to do a redirect after the login?"

1 answer

dannie.Stehr answered on · Accepted Answer · 2019-07-08T15:51:28.524Z

Think right, do a REDIRECT dispatch after dispatch SUCCESS_LOGIN.

Judging by the documentation, in action creators (Creator of the action, the first block of code) you're doing it right.

Then check yourself (I will give a code similar to yours):

1) in the place where transfer history (this is usually Root/App component that is the parent of all)

import { AppContainer } from 'react-hot-loader'
import React from 'react'
import ReactDOM from 'react-dom'
import { Router, browserHistory } from 'react-router' // time
import { Provider } from 'react-redux'
import { routes } from './routes'
import { syncHistoryWithStore } from 'react-router-redux' //two
import configureStore from './store/configureStore'

const store = configureStore()

const history = syncHistoryWithStore(browserHistory, store) //three
const rootEl = document.getElementById('root')

ReactDOM.render(
 <provider store="{store}">
<appcontainer>
 <router history="{history}" routes="{routes}"> //four
</router></appcontainer>
</provider>,
rootEl
)

2) at the place where configure object store (usually a function configureStore)

import { routerMiddleware } from 'react-router-redux' //time
import { browserHistory } from 'react-router' //two
import { createStore, applyMiddleware, compose } from 'redux'
import thunkMiddleware from 'redux-thunk'
import createLogger from 'redux-logger'
import { rootReducer } from '../reducers'

export default function configureStore() {
 const store = compose(
applyMiddleware(thunkMiddleware),
applyMiddleware(createLogger()),
 applyMiddleware(routerMiddleware(browserHistory)), //three (!)
)(createStore)(rootReducer)

 if (module.hot) {
 // Enable Webpack hot module replacement for reducers
 module.hot.accept('../reducers', () => {
 const nextRootReducer = require('../reducers').rootReducer
store.replaceReducer(nextRootReducer)
});
}

 return store
}

3) combineReducers with routing (as you have written)

import { combineReducers } from 'redux'
import { routerReducer } from 'react-router-redux' //time
import products from './products'
import login from './login'
notificationBar import from './notificationBar'
import provider from './provider'

export const rootReducer = combineReducers({
products,
login
notificationBar,
provider
 routing: routerReducer, //two
})

From your question not enough information, but apparently you either:
a) transfer not a true history in configureStore
b) has not complied with syncHistoryWithStore (from step 1)

--- other ---
As an option view how to make redirect after login in redux with middleware (simplified version, but it is good to understand the basics)

As there is a "simple" option is to store the necessary data after login (token, properties of the user, etc.) in localStorage. And after login, it is browserHistory.push