2016-12-23 92 views
0

我正在嘗試使用react-router-redux與Immutable.js reducer建立路由。react-router-redux:路由更改但組件不顯示

我一直在使用syncHistoryWithStore設立實體店,當我點擊一個Link,我可以看到正確的@@router/LOCATION_CHANGE行動出動,這家店被正確地與位置信息基礎的關鍵routing更新減速器,並且該URL正在更改爲正確的位置。

問題是組件不更新。如果我在特定位置加載頁面,則會看到正確的組件,但在此後單擊Link後,將不顯示其他組件。

我已經包括了什麼,我認爲是相關的文件(有一些不相關的信息刪節):

initialize.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只是RouteIndexRoute組件的嵌套列表,從<Route path='/' component={App} />開始。當我的應用程序的兒童道具,我可以看到,有一些兒童在第一次渲染時就會通過,並且它能正確渲染它們,但是在任何時候我都看不到有關兒童變化的控制檯反饋。

登錄動作(狀態是不可變的地圖,但我跑得toJS()進行日誌記錄): Logged Action

缺少什麼我應該改變顯示的組件,從我的路線移動?

回答

0

問題是我從createSelectLocationHistory而不是prevRoutingStateJS返回prevRoutingState