A counter app below shows how each of the state management library is setup and used in its basic form.
React - Redux
Redux - The agnostic and minimalistic library that has become the most popular state management library in React ecosystem.
To connect react with redux, we also need to install additional react-redux library.
- Provider is defined in the main file: index.js, to make the store available to child components
- To access the count state, App and Child component has useSelector hook method to access the state
Vue - Vuex
Vuex - the official state management library that maintained by Vue team. Once the store object included in the main Vue instance in main.js, the $store is available to any component that needs to access the state, to commit mutation, to dispatch action, etc.
Angular - NgRx
NgRx - the library is built based on RxJs reactivity. Being Angular library, it also makes use of the typing features of Typescript to simplify implementation such as: reducer creations and promote type safety programming.
- The store module is included in the main module and available to be used inside the components that inject the store object
- The count value is retrieved from the state which is returned as an observable that can be extracted using async filter or alternatively with subscribe method
Top comments (0)