如何將 angularjs 服務遷移到 redux？

Question

我正在將 AngularJS 1.4 應用程序遷移到 React。 我使用react2angular將一些指令遷移到 React 組件。 現在我正處於將服務遷移到 Redux 的階段。 我不想使用ng-redux 。 有沒有人試過這個？

我正在嘗試逐頁遷移我的 angularJS 應用程序。 我已將頁面的模板代碼遷移到 React 組件，但我的控制器使用了很少的 angularJS 自定義服務。 我想將整個頁面遷移到 React 和 redux 並使用 React 路由器呈現此頁面。 我該如何進行？

Answer 1

好的，您需要考慮一些事項。 這個過程需要一些時間，你需要有耐心。

1. 先說組件遷移。 為此，我們使用react2angular庫。 我們將所有的反應代碼寫在一個component.js中，然后我們為庫描述的角度創建一個包裝器。 我相信這很簡單。

2. 繼續頁面。 為此，您可以使用名為connected-react-router -> https://www.npmjs.com/package/connected-react-router的 npm 模塊。 執行此操作時，您還可以使用react-redux和redux模塊設置商店。

現在您應該為您的頁面創建一個包裝文件，您可以在其中將所有內容包裝在Provider中（在這里您也可以提供store ，這意味着您的應用程序的 redux 商店）然后在 Provider 中您可以從 react-connected 添加您的ConnectedRouter路由器 npm 模塊。 最后在里面你可以放你的反應頁面。

一個例子是

//wrapper.js
<Provider store={store}>
          <ConnectedRouter history={history}>
            <Route path={'/somepath'} component={<Test /} />
            <Route path={'/somepath2'} component={<Test2 /} />
          </ConnectedRouter>
    </Provider>

PS React 組件可以通過使用來自react-redux和redux的compose和connect函數包裝它們來訪問 redux-store。

現在你還應該用 react2angular 包裝器包裝這個包裝器，以便將它集成到你的角度應用程序中。 在你的 react2angular 文件中，你應該同時定義一個組件和一個控制器。 現在是棘手的部分 -> 你需要定義你在你的 react-connected-route 中添加到你的角度路由器的相同路由，並在那里定義你在你的 react2angular包裝文件中所做的template和controller 。

此時你就完成了。 你有與角度集成的反應頁面。 在此遷移期間，您在技術上有 2 個路由器。 遷移所有頁面后，您應該創建一個反應路由器，將所有頁面放在那里，當然要刪除 react2angular 包裝器 + 角度路由器。