React, redux, react-router, react-router-redux, как и где делать редирект после логина?

Question

[hadaev_ivan]

Никак не могу сообразить где правильнее делать редирект после того как пользователь успешно вошел. Думал что правильнее сделать в action так:

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

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

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

но в этом случае адресная строка меняется, но контент остается неизменным.
Код инициализации стора

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;
};

Answer 1

[Максим]

Мыслите верно, делать dispatch REDIRECT стоит после dispatch SUCCESS_LOGIN.

Судя по документации, в action creators (создатель действия, первый блок кода) вы все делаете правильно.

Далее проверяйте у себя (я приведу код, похожий на ваш):

1) в месте, где передаете history (обычно это Root/App компонент, то есть родитель всего)

import { AppContainer } from 'react-hot-loader'
import React from 'react'
import ReactDOM from 'react-dom'
import { Router, browserHistory } from 'react-router' // раз
import { Provider } from 'react-redux'
import { routes } from './routes'
import { syncHistoryWithStore } from 'react-router-redux' //два
import configureStore from './store/configureStore'

const store = configureStore()

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

ReactDOM.render(
  <Provider store={store}>
    <AppContainer>
      <Router history={history} routes={routes} /> //четыре
    </AppContainer>
  </Provider>,
  rootEl
)

2) в месте, где настраиваете объект store (обычно, это функция configureStore)

import { routerMiddleware } from 'react-router-redux' //раз
import { browserHistory } from 'react-router' //два
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)), //три (!)
  )(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 с роутингом (как у вас и написано)

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

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

Из вашего вопроса информации недостаточно, но судя по всему вы либо:
а) передаете не верный history в configureStore
б) не выполнили syncHistoryWithStore (из пункта 1)

--- дополнительно ---
Как вариант посмотрите как сделать редирект после логина в redux с помощью middleware (упрощенный вариант, но хорошо для понимания основ)

Так же есть "простой" вариант - хранить необходимые данные после логина (токен, свойства юзера, и т.д.) в localStorage. И после логина, делать стандартный browserHistory.push

Comments

[hadaev_ivan]

Спасибо за помощь, проблема оказалась в "а) передаете не верный history в configureStore" за основу я брал https://github.com/StevenIseki/react-router-redux-... и именно в этом была проблема) Признателен за вашу работу) У вас отличный туториал, продолжайте в том же духе!)