CODEWITHSUNDEEP
angularjsreactjsreduxmigration
Aswin K
Aswin K

Reputation: 343

How to migrate an angularjs service to redux?

I am migrating a AngularJS 1.4 app to React. I migrated few directives to React components using react2angular. Now I am in a stage to migrate services to Redux. I don't want to use ng-redux. Has anyone tried this before?

I am trying to migrate my angularJS app page by page. I have migrated the template code for a page to React component, but my controller uses few angularJS custom services. I want to migrate this whole page to react and redux and render this page with React router. How should I proceed?

Upvotes: 2

Views: 434

Answers (1)

Konstanitnos Schoinas
Konstanitnos Schoinas

Reputation: 159

Okay so there are a few things that you need to consider. This process will take some time and you need to have patience.

  1. Lets speak about component migration first. For this we use the react2angular library. We write all our react code inside a component.js and then we create a wrapper for the angular as the library describes. This is simple I believe.

  2. Moving on to pages. For this you can use a npm module called connected-react-router -> https://www.npmjs.com/package/connected-react-router. When you doing this you can also setup the store by using react-redux, redux modules.

Now you should create a wrapper file for your pages where you can wrap everything inside a Provider ( here you can provide store as well, meaning the redux store to your app ) and then inside the Provider you can add your ConnectedRouter from react-connected-router npm module. Last inside this you can put your react pages.

An example would be

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

P.S React Components can access the redux-store by wrapping them with compose & connect functions from react-redux & redux.

Now you should also wrap this wrapper with a react2angular wrapper in order to integrate it into your angular application. In your react2angular file you should define both a component & a controller. Now the tricky part -> You need to define the same routes you added in your react-connected-route to your angular router as well and define there the template & the controller that you did in your react2angular wrapper file.

At this point you are done. You have react pages integrated with the angular. During this migration you technically have 2 routers. After you migrate all your pages you should create a react router put all the pages there and remove the react2angular wrappers of course + the angular router.

Upvotes: 1

Related Questions