如何将 angularjs 服务迁移到 redux？

Question

我正在将 AngularJS 1.4 应用程序迁移到 React。我使用 react2angular 将一些指令迁移到 React 组件。现在我正处于将服务迁移到 Redux 的阶段。我不想使用 ng-redux。以前有人试过吗？

我正在尝试逐页迁移我的 angularJS 应用程序。我已将页面的模板代码迁移到 React 组件，但我的控制器使用很少的 angularJS 自定义服务。我想迁移整个页面以响应和还原并使用 React 路由器呈现此页面。我应该如何进行？

Answer 1

好的，所以您需要考虑一些事项。此过程需要一些时间，您需要有耐心。

1. 让我们先谈谈组件迁移。为此，我们使用react2angular 库。我们在component.js 中编写所有的反应代码，然后我们为库描述的角度创建一个包装器。我相信这很简单。

2. 转到页面。为此，您可以使用名为 connected-react-router -> https://www.npmjs.com/package/connected-react-router 的 npm 模块。执行此操作时，您还可以使用 react-redux、redux 模块设置商店。

现在您应该为您的页面创建一个 wrapper 文件，您可以在其中将所有内容包装在 Provider 中（在这里您也可以提供 store，这意味着您的应用程序的 redux 存储）和然后在 Provider 中，您可以从 react-connected-router npm 模块添加您的ConnectedRouter。最后在这里面你可以放你的反应页面。

一个例子是

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

P.S React Components 可以通过使用来自react-redux 和redux 的compose 和connect 函数包装它们来访问redux-store。

现在您还应该使用 react2angular 包装器包装此 包装器，以便将其集成到您的 Angular 应用程序中。在您的 react2angular 文件中，您应该同时定义一个组件和一个控制器。现在棘手的部分->您还需要定义您在 react-connected-route 中添加的相同路由到您的角度路由器，并在那里定义您在 react2angular 包装器中所做的template 和controller 文件。

至此，您就完成了。您已将反应页面与 Angular 集成在一起。在此迁移期间，您在技术上拥有 2 个路由器。迁移所有页面后，您应该创建一个反应路由器，将所有页面放在那里并删除 react2angular 包装器当然 + 角度路由器。