我是新的反应和redux,我用react-router-dom开始我的项目,现在我想在混合中添加Redux。
我应该继续使用react-router-dom还是只安装react-router-redux?或两者? Route组件的工作原理是否相同?我对于react-router-dom的使用有点困惑吗?
我是否将所有链接组件切换到将操作分派给商店的元素?
谢谢你的帮助。
通常在使用Redux时,建议使用react-router-redux,它封装了react-router。
只有在初始化应用程序时,才应该将react-router和Redux中的一些内容传递给Router
和browserHistory
。
在app.js中:
import { Router, browserHistory } from 'react-router';
import { syncHistoryWithStore } from 'react-router-redux';
const initialState = {};
const store = configureStore(initialState, browserHistory);
const history = syncHistoryWithStore(browserHistory, store);
const render = () => {
ReactDOM.render(
<Provider store={store}>
<Router
history={history}
routes={rootRoute}
/>
</Provider>,
document.getElementById('app')
);
};
您提供响应的Router元素作为Redux的Provider元素的子元素,并且您还向Router元素提供React的browserHistory的Redux包装器。
在项目的其余部分,您只需要使用react-router-redux,而不是直接调用React。
react-router-dom BTW只是React 4中的另一层简化,它封装了react-router,但是如果你的项目架构是Redux,那么你需要根据Redux的规则工作,因此只使用react-router-redux为了在每个动作中通过商店(除了前面提到的初始化)。
我建议你使用react-router-redux。使用react-router-redux,您可以将路由器状态与Redux Store连接,以便您可以使用与用于与其余应用状态交互的相同API来与路由器交互。
使用react-router-redux。
使用react-router-redux,位置状态将作为普通对象保存在redux存储中。这意味着您可以像使用任何其他状态一样使用connect注入位置信息。