react-router-redux: Маршруты меняются, но компоненты не отображаются

Я пытаюсь настроить маршрутизацию с помощью 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() для ведения журнала): Зарегистрированное действие

Чего мне не хватает, что должно изменить отображаемые компоненты по мере продвижения по моим маршрутам?


person Mark Chandler    schedule 23.12.2016    source источник


Ответы (1)


Проблема заключалась в том, что я возвращал prevRoutingState из createSelectLocationHistory, а не prevRoutingStateJS.

person Mark Chandler    schedule 23.12.2016