Я пытаюсь настроить маршрутизацию с помощью react-router-redux с редукторами Immutable.js.
Я настроил хранилище с помощью syncHistoryWithStore
, и когда я нажимаю на Link
, я вижу, что отправлено правильное действие @@router/LOCATION_CHANGE
, что хранилище правильно обновлено информацией о местоположении для ключа routing
базового редуктора и что URL-адрес меняется на правильное местоположение.
Проблема в том, что компоненты не обновляются. Если я загружаю страницу в определенном месте, я вижу правильный компонент, но никакие другие компоненты не отображаются после того, как я нажму Link
после этого.
Я включил то, что я считаю соответствующими файлами (с отредактированной не относящейся к делу информацией):
инициализировать.js:
import { createStore, applyMiddleware } from 'redux'
import { composeWithDevTools } from 'redux-devtools-extension/developmentOnly'
import { browserHistory } from 'react-router'
import { routerMiddleware, syncHistoryWithStore } from 'react-router-redux'
import reducers from 'reducers'
const browserHistoryRouterMiddleware = routerMiddleware(browserHistory)
const middlewares = [browserHistoryRouterMiddleware]
/* Create store */
const store = createStore(
reducers,
undefined,
composeWithDevTools(
applyMiddleware(...middlewares),
),
)
/* Configure history */
const createSelectLocationState = () => {
let prevRoutingState, prevRoutingStateJS
return (state) => {
const routingState = state.get('routing')
if (typeof prevRoutingState === 'undefined' || prevRoutingState !== routingState) {
prevRoutingState = routingState
prevRoutingStateJS = routingState.toJS()
}
return prevRoutingState
}
}
const history = syncHistoryWithStore(browserHistory, store, {
selectLocationState: createSelectLocationState(),
})
export { store, history }
index.js:
import React from 'react'
import { render } from 'react-dom'
import { store, history } from 'initialize'
import Root from 'components/Root'
render(
<Root store={store} history={history} />,
document.getElementById('root')
)
Корень.js:
import React, { PropTypes } from 'react'
import { Provider } from 'react-redux'
import { Router } from 'react-router'
import routes from 'routes'
const Root = ({ store, history }) => (
<Provider store={store}>
<Router history={history}>
{routes}
</Router>
</Provider>
)
Root.propTypes = {
store: PropTypes.object.isRequired,
}
export default Root
routes
— это просто вложенный список компонентов Route
и IndexRoute
, начиная с <Route path='/' component={App} />
. Когда я console.log
прописываю дочерние элементы приложения, я вижу, что есть дочерние элементы, переданные при первом рендеринге, и они правильно отображаются, но ни в какой другой момент я больше не вижу обратной связи консоли об изменении дочерних элементов.
Зарегистрированное действие (состояние — неизменяемая карта, но я запускаю toJS()
для ведения журнала):
Чего мне не хватает, что должно изменить отображаемые компоненты по мере продвижения по моим маршрутам?