AngularJS migration to React/Redux – Panagiotis Vrs – Medium

#AngularJS migration to React/Redux:  #ReactJS #JavaScript #Angular

  • In our main file when we define the whole application we import combined reduces, ngRedux, redux thunk and pass it as module dependency.In your app configuration i am passing the $ngReduxProvider and i am creating my store.
  • Now we wanted to pass some data and use redux and thats why we created the redux store to have an initial state and use or reducers define in the file to update it.Pass that store to components !!
  • state(“ratings”, { url: “/ratings”, views: { “main@settings”: { templateUrl: ratingsTemplate, controller: “RatingsController” } } });}and change it to this.function ratingsConfig($stateProvider) { $stateProvider .
  • state(“ratings”, { url: “/ratings”, views: { “main@settings”: { template: ` Ratings-Page store=”store”/Ratings-Page `, controller: “RatingsController” } } });}As you can see i am passing a store variable in the RatingsPage props.
  • So the controller should look like thisfunction ratingsController($scope, $ngRedux) { $scope.store = $ngRedux;}This way redux can identify that the store in the props its actually the store that needs in the connect() function.

Some days ago i wanted to start implementing something i had in mind for the past 4 months. Migrating an AngularJS project to React with Redux state management. I did some research around the topic…

@starliftorg: #AngularJS migration to React/Redux: #ReactJS #JavaScript #Angular

Some days ago i wanted to start implementing something i had in mind for the past 4 months. Migrating an AngularJS project to React with Redux state management.

I did some research around the topic and although there are some articles around Angular to react migration i got lost. Also I couldn’t find how you can have redux over the project only for react. There are hundreds of projects out there that will have to decide in the next years to move to another framework as AngularJS and it’s libraries will have less and less support from the community. I though that this can be easier so that’s why i did it and kept some notes so i can share my findings.

Starting with AngularJS migration to React is not an easy task. What about start using Redux for state management as well ? Well this doesn’t have to be a nightmare !

The project has already been switched to ES6 with Webpack so that was one thing that helped a lot. So i suggest before moving to such migration to really think about it, start using Webpack and module dependencies ASAP !

I wanted to start moving that project from AngularJS to React so i could start using all the new features modern web has to offer regarding speed, splitting the code to smaller components and of course testing.

I’m not gonna lie, i wasn’t testing enough or .. at all in this project. Two months before this migration i started implementing some testing principles around the project so i could keep in track in some tasks, bottom line … was amazingly difficult to setup testing and coverage and at the end it is taking some time to run the tasks which it was slower than Webpack build !!!

First thing that i did was to install all the necessary dependencies like react, react-dom, react-redux etc. You can see also the versions i am using.

The coolest plugins of all is the react2angular which i am using to translate all the react components to Angular components.

Then for development we need to install babel dependencies to have all the cool ES6 features. Keep in mind that i already had babel i am only pasting this to see versions and to keep aligned !

Making your first component is relatively easy. I expect that you already familiar with react so i will just jump in the code. You can split your code to as many components you seem fits your needs. An example of a component is like the below. This is how i regularly switched small (Presentational) components of maybe a ul with data or each item of a ul.

This small components can now be imported to our project. When you define your module in the AngularJS app you can import the component and with react2angular dependency change it to AngularJS directive/component.

Now on the .html if you use the component will load. Congrats this is your first react component to Angular !

Hope you didn’t got lost. Are you with me? … good. Remember!

Next step is that you want to change the whole module to react. This is going to be a container component in our react app. I split those in to pages. Before we proceed to that though we need to start using redux actions and reducers. This will help us in the next step when we will combine reducers with redux!

So in order to implement some redux for our container components first you will need to define your reducer and action for this Rating component. You can see the app structure above to see the naming and position of those in my project.

My reducer looks like this.

The Actions looks like this.

Simple! Doing two things just for the sake of testing that is working. you cna use your own.

So this is going to be my ratings page. This is how my page is looking. you can also pass a “hi there” inside the div so you can be sure you have something without data. Again just for testing.

Now we will need to use ng-redux in order to create a store and pass that store down to our components. What we have to do is to combine all of our application reducers like we do in react so i created a seperate file for that in order to use that in the future when i’ll remove AngularJS. I am calling this “Reducers” and lookis like this. What it actually does is you define here all your application reducers in order to combine them and in the next step we “feed” those reducers to the redux for the state. You will see i only have Ratings for now but you can (and must) fill any new component along the way in here.

Now we need to import the redux. In our main file when we define the whole application we import combined reduces, ngRedux, redux thunk and pass it as module dependency.

In your app configuration i am passing the $ngReduxProvider and i am creating my store. I am also passing the redux devtools if you want to put it in your project, if not just remove from the createStoreWith function.

You are all set now. Using the $ngRedux in your controllers you can now get the store of your application !

So we have made a small component. Then we refactored the whole module of Angular and created a container component to replace it. Now we wanted to pass some data and use redux and thats why we created the redux store to have an initial state and use or reducers define in the file to update it.

Because i was using the $stateProvider in Angular and i had something like the below. What i did is stop using an import of the template html page and i used directly the page of the react that i defined as a component before in AngularJS like we did previously. So i took this.

url: “/ratings”,

templateUrl: ratingsTemplate,

and change it to this.

url: “/ratings”,

As you can see i am passing a store variable in the RatingsPage props. You imagine it right i am only using the RatingsController to get and pass that store. So the controller should look like this

AngularJS migration to React/Redux – Panagiotis Vrs – Medium

You might also like More from author

Comments are closed, but trackbacks and pingbacks are open.