Redux in ReactJS
- subscribes to the Redux store.
- check to see if the data needed by the component have changed.
- re-render the component.
Importance of React Redux:
- Being the official UI bindings for React Application, it is always kept up-to-date with any API changes.
- Good ‘React’ architecture is encouraged by React Redux.
- Many performance optimizations are implemented internally, to re-render components only when needed.
To install Redux, React 16.8.3 or higher version is required and is a must.
Command: To use Redux with React application.
$npm install redux react-redux –save
There are three main components of Redux architecture.
The entire state of an application lists at a place called Store. It acts as a brain and manages the status of the application. It also has a dispatch(action) function.
An action is a pure object which is sent or dispatched from the view. It is created to store information about the user’s event such as info about the type of action, the time of occurrence, the location of occurrence, info about its coordinates, and info about the state it aims to change.
Reducer is a pure function which is used to return a new state from the initial state. It reads the payloads from the actions. The reducer then updates the store via the state accordingly.