混亂react-router-dom和react-router-redux

Question

我是新的反應和redux，我用react-router-dom開始我的項目，現在我想在混合中添加Redux。

我應該繼續使用react-router-dom還是只安裝react-router-redux？ 或兩者？ Route組件的工作原理是否相同？ 我對於react-router-dom的使用有點困惑嗎？

我是否將所有鏈接組件切換到將操作分派給商店的元素？

謝謝你的幫助。

Answer 1

通常在使用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為了在每個動作中通過商店（除了前面提到的初始化）。

Answer 2

我建議你使用react-router-redux。 使用react-router-redux，您可以將路由器狀態與Redux Store連接，這樣您就可以使用與用於與其余應用狀態交互的相同API來與路由器交互。

Answer 3

使用react-router-redux。

使用react-router-redux，位置狀態將作為普通對象保存在redux存儲中。 這意味着您可以像使用任何其他狀態一樣使用connect注入位置信息。