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

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Мыслите верно, делать 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
    Ответ написан
    1 комментарий