Javascript 反应路由器重复;redux存储和历史记录未正确同步
我正在尝试使用react router redux和Immutable.js还原程序设置路由 我使用Javascript 反应路由器重复;redux存储和历史记录未正确同步,javascript,reactjs,redux,react-router,react-router-redux,Javascript,Reactjs,Redux,React Router,React Router Redux,我正在尝试使用react router redux和Immutable.js还原程序设置路由 我使用syncHistoryWithStore设置了存储区,当我单击链接时,我可以看到正确的@@router/LOCATION\u CHANGE操作已被调度,存储区已正确更新为基本还原器路由键的位置信息,并且URL正在更改到正确的位置 但是新路径的子组件不会渲染。上一个路径的组件仍在屏幕上渲染。它们也不会被渲染,它们只是停留。当我查看传递给父组件的道具时,位置道具仍然显示前面的路线。这就好像redux操
syncHistoryWithStore
设置了存储区,当我单击链接时,我可以看到正确的@@router/LOCATION\u CHANGE
操作已被调度,存储区已正确更新为基本还原器路由键的位置信息,并且URL正在更改到正确的位置
但是新路径的子组件不会渲染。上一个路径的组件仍在屏幕上渲染。它们也不会被渲染,它们只是停留。当我查看传递给父组件的道具时,位置
道具仍然显示前面的路线。这就好像redux操作被触发了,什么也没发生。没有传下新道具
这是我的app.js
reducers.js
有什么想法吗?几天来我一直在努力解决这个问题
import configureStore from './config.redux/store';
// import selector for 'syncHistoryWithStore'
import { makeSelectLocationState } from './config.redux/selectors';
// root app
import App from './App';
import { createRoutes} from 'config.routes/routes';
// create redux store with history
const initialState = {};
const store = configureStore(initialState, browserHistory);
// sync history and store, as the react-router-redux reducer
const history = syncHistoryWithStore(browserHistory, store, {
selectLocationState: makeSelectLocationState(),
});
history.listen(location => {
console.log(location);
});
const rootRoute = createRoutes(store);
ReactDOM.render(
<Provider store={store}>
<MuiThemeProvider>
<Router
history={history}
routes={rootRoute}
render={
// Scroll to top when going to new page, imitating default browser behavior
applyRouterMiddleware(useScroll())
}
/>
</MuiThemeProvider>
</Provider>, document.getElementById('app')
);
const sagaMiddleware = createSagaMiddleware();
const logger = createLogger();
export default function configureStore(initialState = {}, history) {
// Create store with middleware
const middlewares = [
sagaMiddleware,
logger,
routerMiddleware(history)
];
const enhancers = [
applyMiddleware(...middlewares)
];
// If Redux DevTools Extension is installed use it, otherwise use Redux compose
/* eslint-disable no-underscore-dangle */
const composeEnhancers =
process.env.NODE_ENV !== 'production' &&
typeof window === 'object' &&
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ : compose;
/* eslint-enable */
const store = createStore(
createReducer(),
fromJS(initialState),
composeEnhancers(...enhancers)
);
// Extensions
store.runSaga = sagaMiddleware.run;
store.asyncReducers = {}; // async reducer registry
// Make reducers hot reloadable, see http://mxs.is/googmo
/* istanbul ignore next */
if (module.hot) {
module.hot.accept('./reducers', () => {
require('./reducers').then((reducerModule) => {
const createReducers = reducerModule.default;
const nextReducers = createReducers(store.asyncReducers);
store.replaceReducer(nextReducers);
});
});
}
return store;
}
// initial routing state
const routeInitialState = fromJS({
locationBeforeTransition: null,
});
// merge route into the global application state
function routeReducer(state = routeInitialState, action) {
switch(action.type) {
case LOCATION_CHANGE:
return state.merge({
locationBeforeTransition: action.payload,
});
default:
return state;
}
}
/**
* Create the main reducer with async loaded ones
*
*/
export default function createReducer(asyncReducers) {
return combineReducers({
routing: routeReducer,
auth: globalReducer,
...asyncReducers
});
}