Реагируйте на редуксы не меняя маршруты

Question

Обновление этого вопроса для использования connected-react-router вместо react-router-redux, так как он не совместим с react-router v4.

Мне не удается настроить работу маршрутизации при отправке действия.Я подозреваю, что это потому, что я использую саги, которые не настроены должным образом.

У меня есть сага:

import { call } from 'redux-saga/effects'
import { push } from 'connected-react-router'

//...

yield call(push, '/dashboard')

Функция push не перенаправляет браузер по указанному путинесмотря на то, что журналы редуксов в инструментах webdev показывают, что действие было успешно отправлено.

Файл index.js верхнего уровня выглядит следующим образом:

import createSagaMiddleware from 'redux-saga'
import rootSaga from './redux/sagas'
import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'
import logger from 'redux-logger'
import App from './App'
import registerServiceWorker from './registerServiceWorker'
import rootReducer from './redux/modules'
import { applyMiddleware, compose, createStore } from 'redux'
import { createBrowserHistory } from 'history'
import { routerMiddleware, connectRouter } from 'connected-react-router'

const history = createBrowserHistory()
const sagaMiddleware = createSagaMiddleware()
const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
const store = createStore(
  connectRouter(history)(rootReducer),
  composeEnhancer(
    applyMiddleware(
      sagaMiddleware,
      routerMiddleware(history),
      logger
    )
  )
)

sagaMiddleware.run(rootSaga)

const render = () => {
  ReactDOM.render(
    <Provider store={store}>
      <App history={history} />
    </Provider>,
    document.getElementById('root')
  )
}

render()

registerServiceWorker()

Файл App.js, содержащий корневой компонент, имеет:

import { ConnectedRouter } from 'connected-react-router'
import { Route, Switch, Redirect } from 'react-router-dom'

const App = ({ history }) => {
  return (
    <ConnectedRouter history={history}>
      <Switch>
        { routes }
      </Switch>
    </ConnectedRouter>
  )
}

export default App

Чего не хватает в этой настройке, чтобы она работала?

Версии зависимостей:

"react-redux": "^5.0.7",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"connected-react-router": "^4.3.0"

Answer 1

Мне кажется, что мне нужно использовать withRoter (не знаю, правильный ли это путь или нет):

export default withRouter(compose(withConnect)(App)); //wrapped in withRouter

или

export default compose(
  withRouter,
  withConnect,
)(App);

И в избыточномсага:

yield put(push('/newpage'));

Я использую реактивную модель, https://github.com/react-boilerplate/react-boilerplate. Я не знаю, правильно ли это или нет, но таким образом маршрут меняется в URL, и я попадаю на новый маршрут.Если я не использую withRouter, маршрут меняется в URL, и больше ничего не происходит ... Я нашел решение здесь https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/withRouter.md

Хотелось бы узнать мнение кого-либо по этому поводу.Народ на https://github.com/react-boilerplate/react-boilerplate может быть?

Answer 2

В отличие от метода history push (который является нечистой функцией), connected-react-router 'push является создателем действия и его результатом ( действие ) должно быть отправлено для запуска навигации.
Для этого в redux-saga необходимо использовать put, а не call.

call создает эффект вызова .
При получении он просто выполняет данную функцию с заданными аргументами и возвращает результат.Это хорошо подходит для (но не ограничивается) нечистых вызовов функций (например, сетевых запросов), так как отделяет нас от прямого выполнения функции.

put создает диспетчеризациюэффект .
При выдаче отправляет переданный в объект действия.Таким образом, отключение вашего кода только от прямого вызова dispatch, а не создателя действия (который должен быть чистым по замыслу).

Итак, в вашем случае решение будет выглядеть так:

yield put(push('/dashboard'))

PS: то же самое относится к react-router-redux push

Answer 3

Sagas реализованы в виде функций генератора, которые выдают объекты промежуточному программному обеспечению redux-saga

Таким образом, ваша Saga должна экспортировать функцию Generator :

import { call } from 'redux-saga/effects'
import { push } from 'connected-react-router'

//...

export function* rootSaga() {
    return yield call(push, '/dashboard')
}

И rootSaga должны быть зарегистрированы с помощью sagaMiddleware:

import { rootSaga } from './redux/sagas';
...
sagaMiddleware.run(rootSaga)
...

Ссылка: https://redux -saga.js.org / docs / Введение / BeginnerTutorial.html

Answer 4

вам нужно подключить промежуточное ПО маршрутизатора , например:

import { browserHistory } from 'react-router'
import { routerMiddleware } from 'react-router-redux'

const sagaMw = createSagaMiddleware()
const routerMw = routerMiddleware(browserHistory)
const middleware = applyMiddleware(sagaMw, routerMw, logger)