我已经尝试设置React,redux,react-redux,react-router和react-redux-router,但每次我从一个路由到另一个路由转换时,整个应用程序都会被重新渲染,我该如何解决这个问题?我的意思是,我需要做的是至少保持最低级别的组件并且不会丢失redux状态树,因为路由器转换会重置redux状态.
这些是我正在使用的软件包的版本:
"react":"^ 0.14.6",
"react-dom":"^ 0.14.6",
"react-redux":"^ 4.0.6",
"react-router":"^ 2.0.0-rc5 ",
"react-router-redux":"^ 3.0.0",
"redux":"^ 3.0.6"
这是我的路线配置:
export default (<Route path="/" component={App}>
<Route path="companies">
<Route path="create" components={CompaniesCreate}></Route>
<Route path="grid" components={CompaniesGrid}></Route>
</Route>
</Route>);
Run Code Online (Sandbox Code Playgroud)
我的默认index.js导出:
ReactDOM.render(
<Provider store={store}>
<div>
<Router history={browserHistory} routes={Routes}/>
<DevTools />
</div>
</Provider>
, document.querySelector('.container'));
Run Code Online (Sandbox Code Playgroud)
我的ConfigureStore.js
const reduxRouterMiddleware = syncHistory(browserHistory);
const finalCreateStore = compose(
applyMiddleware(ReduxPromise, reduxRouterMiddleware),
DevTools.instrument()
)(createStore);
export default function configureStore(initialState) {
const store = finalCreateStore(rootReducer, initialState);
if (module.hot) {
module.hot.accept('../reducers', () =>
store.replaceReducer(require('../reducers'))
);
}
return store;
} …Run Code Online (Sandbox Code Playgroud)