What is Redux?
Redux is an open-source JavaScript library for managing and centralizing application state.
Redux follows the unidirectional data flow. It means that your application data will follow in one-way binding data flow.
Installation:
Core Redux
npm install redux
To use Redux with react application, you need to install an additional dependency as follows
npm install react-redux
Core principles of Redux
Redux follows three fundamental principles:
1. Single source of truth: The state of your whole application is stored in an object tree within a single store. The single state tree makes it easier to keep track of changes over time and debug or inspect the application.
2. State is read-only: The only way to change the state is to emit an action, an object describing what happened. This ensures that neither the views nor the network callbacks will ever write directly to the state.
3. Changes are made with pure functions: To specify how the state tree is transformed by actions, you write reducers. Reducers are just pure functions that take the previous state and an action as parameters and return the next state.
Core concepts of Redux
Redux implements three fundamental concepts:
1. Redux Store
2. Actions
3. Reducers
What is a Redux Store?
A store holds the whole state tree of your application. The only way to change the state inside it is to dispatch an action on it.
A store is not a class. It’s just an object with a few methods on it. To create store, pass your root reducing function to createStore(). In the new update configureStore() can be used to create store.
Store Methods
1.getState(): Returns the current state tree of your application. It is equal to the last value returned by the store’s reducer.
2.dispatch(action): Dispatches an action. This is the only way to trigger a state change.
3.subscribe(listener): Adds a change listener. It will be called any time an action is dispatched, and some part of the state tree may potentially have changed. You may then call getState() to read the current state tree inside the callback.
What is an Action?
State in Redux is read-only. If anyone wants to change the state of the application, then they’ll need to express their intention of doing so by emitting or dispatching an action.
An action is a plain object that describes the intention to cause change with a type property. It must have a type property which tells what type of action is being performed. It can also have a payload property which contains information about data which can be used in reducers.
What are Reducers?
Reducers are a pure function in Redux. Pure functions are predictable. Reducers are the only way to change states in Redux. It is the only place where you can write logic and calculations. Reducer function will accept the previous state of app and action being dispatched, calculate the next state, and returns the new object.
Let’s see an example of Counter App using React & Redux.
Step 1:
First create react app using command and install required redux dependencies.
create-react-app app app-name
npm install redux react-redux
Step 2:
Create required files and folders like actions, reducers, and store.
The action folder will contain index.js file.
The reducers folder will contain index.js and counter.js files.
The store.js file in created inside src folder.
The folder structure will look something like this.
Step 3:
Create a basic UI for the counter application in the App.js file.
Step 4:
Create actions like increment, decrement, and reset inside index.js from actions folder.
Step 5:
Now create reducers inside counter.js file from reducers folder, which will be called upon type matching.
Step 6:
Now create a rootReducer and combine all reducers using combineReducers from redux inside the index.js file from reducers folder.
Step 7:
Create a store to store all the states inside your app. Then pass the rootReducer to store. If you want to use Redux_Devtools pass it as second parameter to store.
Step 8:
Run your application using npm start command. The output will look something like below.
Conclusion:
Redux is a Predictable State Container for JS Apps.
To learn more about Redux visit official website mentioned below.
References:
https://redux.js.org/introduction/getting-started
Thanks to Thapa Technical youtube channel and do checkout his video on Redux.
https://www.youtube.com/watch?v=1oU_YGhT7ck&t=1s
For the code visit link below.
https://github.com/thapatechnical/reduxtutorial/tree/main/src