The 10 best tools for state management in Front-End

During the last years, thanks to a more logical Frontend, new ways of data management have been created. If we focus our attention in the Post-Flux period, which are the most used libraries or systems/frameworks??

Some years ago, FLUX had become the standard to manage the states with Reactjs. This way of working combined with its structure of Actions, Dispatchers, Reducers and so on, created a standard which would be applied to the subsequent libraries for lots of applications.

From the bases of this library, we would obtain Redux, which is probably the most well-known library. However, nowadays, and depending on the type of project we are creating and the framework/library we are using, we will find different options.

The different alternatives we would have for our generic project, would be:

• No library: for those easy projects and without a huge complexity managed from the frontend, it could give us the possibility of managing the data without adding other libraries.

• Customised: in some cases, we can choose to create our own system to manage the states and/or the application data.

• RXJS Subjects: in some other cases, specially on low and medium complexity applications in Angular, we can choose to use the Subjects to handle the data and to pass the information to our components in a more general way.

• Redux: recommended for medium and big applications, it is the generic solution for any library/framework which we may be using in the frontend.

• AKITA: it is similar to Redux, but easier to use by avoiding us actions and dispatchers.

• Mobx: it has similar functionalities to Redux, but again easier to use. It is recommended for small projects using React or Vue.

• Framework specific:

  • Angular

    • NGRX: Redux application oriented to Angular

    • NGXS: similar to NGRX but using a structure and way of working close to working with Angular.

  • React

    • Context: It is provided by React in the latest versions, that would facilitate us not to use Redux in simple applications.

  • Vue

    • Vuex: application of Redux with Vue

Once that the most important options for managing states have been reviewed, the most important aspects that we must take into consideration when we select one of the discussed alternatives would be:

• Size of the application.

• Library and/or rendering framework: React, Angular, Vue, Svelte…

• Expertise of the team which is going to develop and maintain the project.

We will never have a perfect option for all the cases, even the best option won’t be optimal if nobody can provide support later and/or make the project evolve.“All things are difficult before they are easy.” (Thomas Fuller).

Links:

• https://facebook.github.io/flux/

• https://es.redux.js.org/

• https://www.ngxs.io/

• https://es.reactjs.org/docs/context.html

• https://ngrx.io/

• https://vuex.vuejs.org/

• https://github.com/datorama/akita

• https://github.com/mobxjs/mobx

• https://rxjs-dev.firebaseapp.com/guide/subject

• https://medium.com/javascript-in-plain-english/similarities-and-differences-between-vuex-and-redux-by-developing-an-application-be3df0164b22

Translation by Santiago Moreira