Over 10 years we help companies reach their financial and branding goals. Engitech is a values-driven technology agency dedicated.

Gallery

Contacts

411 University St, Seattle, USA

engitech@oceanthemes.net

+1 -800-456-478-23

Let’s understand what Redux is, its usage and how to use it in React application?

Development
redux

Let’s understand what Redux is, its usage and how to use it in React application?

Redux is a state management tool for your application which means it allows you to define one inclusive store for your application. And each component can have access to that single store.
This concept is completely different from what you do with react. React’s every component has its internal state where there is no need of an external library.
So, you would ask that then why do I need an external library to manage the state? Don’t you feel like that it’s bringing more confusion?

It can be true to some extent as once; I do have this same question.
However, managing all these React internal states can be cumbersome and all you need to do is pass props to children and vice versa. Here comes where Redux actually shines.

Advantages of using Redux:
  • Redux is not specific to React only as it can be used with another frameworks such as Angular or Vue.js.
  • One can manage state of application easily by making usage of Redux. We have tried building an application using plain React but using Redux with React is an elevation.
  • Having a single state makes your application predictable that allows you to implement login features. In this case the data lies in only one place i.e. the store.
Working of Redux:

It’s vital to remember that Xcode can only run on macOS. Thus, users will need a Mac to create an iOS app with it. This iPad is an exception. The iPad does not support Xcode.

  • The Store
  • The Actions
  • The Reducers
Let’s discuss about these three building blocks thoroughly:
The Store:The store is used to hold your application state. A cloud out there or the sun that each component who all have access to can see.
The Actions: The only way to keep your redux store updated is through the actions. The store gets updated via the store.dispatch() function. Let’s go through an example of action in Redux:
{
  type: 'ADD_TASK',
  text: "Do some coding at 8pm",
}
Note: An action will have a “type” property through which your store can be changed. Actions are not just sent but come from what we call action creators. Action creators are functions that help you in creating actions and send them like
function addTask(task){return {type: ADD_TASK,task: task}
// or simply return {
type: ADD_TASK,
task}
In general Actions describe “What happened”. In our given example of addTask , we can say this happened.
“If a user wants to add a new task then (type: ADD_TASK), with a text (task property)”.
The thumb rule for rucer is: It’s a function that accepts 2 things i.e., an action, and the previous state. Depending on the action type property, it turns into new state. If you really understood it, then things must have been manifested to you if you roll your eyes below at the instance of reducer we have set for you.
Consider the case when we want to add a new task to our Redux store. We can achieve this with the reducer if we use the following logic:
1. We begin by setting up our default store. So we make a new file called reducer.js and add the following code to it:
const defaultStore = {
tasks: [],
}
Here your default store is ready.
Now it’s time to define reducer (let’s call it taskReducer)
const taskReducer = (store = defaultStore, action) => {// Rest of the function}
This function is our reducer. You’ll type it directly beneath the default shop. Allow me to clarify what is going on there:Again thumb rule and now the taskReducer:
const taskReducer = (action, store = defaultStore) =>
{switch(action.type){
case 'ADD_TASK':
// do somethingdefault:return store}
In this taskReducer function, and to make our assessment, we use the switch statement. We want to see if the value of the action’s type (action.type) is true and take action if it is.
Let’s get back to our function. When we receive an action with the type ‘ADD TASK,’ we will now take action. In this scenario, we want to add the task to the store’s tasks array.
const taskReducer = (action, store = defaultStore) =>
{switch(action.type){
case 'ADD_TASK': // adding the task to our storereturn
[...state,
tasks: tasks.concat(action.task)]default:return store}
We have a case of ‘ADD TASK’ inside the switch statement. If the value of action.type is ‘ADD TASK,’ the new state will be returned, with the added task attached.
The return statement causes the state to be updated.
It’s worth noting that before appending the task, we copied the prior state. This is a Redux etiquette. Before you add or remove an element from the previous state, you should copy it.
The programme monitors any changes in your Redux store and automatically updates itself.
Once it recognises a change in the store, any component that is connected to one part or the entire store will re-render. This functionality is useful since it allows you to specify which components can access your state and how they should re-render with the new information.
Now let’s understand how to use Redux with React with the help of an example. We will make this understand to you by implementing it on real app. In this section, we’ll use React to create our first Redux store. Let’s see Redux in action now that we’ve explained how it works.
1. Initiate by creating React Application
First create your React application using simple to-do-list. We are using Vs code but you can stick to your favourite code editor. Now open your terminal and type:
create-react-app react-with-redux
This command creates a react-with-redux folder in which your React application will be stored.
Use your code editor to open that folder. (cd react-with-react-with-react-with-react-with-react-with- We may now go to the next stage, which is Redux installation.
2. Installing Redux in React
Install Redux in your app and then Run the command:
npm install redux
Going forward with the step, now install React-Redux. This installation will allow your react component to have an access on the store. npm install react-redux
3. Time to create the Store
We can now create our store after installing the redux dependencies. This is done in the src folder’s index.js file.We begin by importing the createStore function from the’redux’ package (line 7 in the screenshot). This function generates the Redux store, which is where the state is stored. Remember that your app should only have one store.
redux-code3
After that, we make our reducer file. Create a ‘reducers’ folder in your src folder. Make a new file called’reducer.js’ in that new folder.
This file will be our application’s reducer:
redux-code2
Let’s make our store in index.js now. To create our store, we must first import our reducer and then use the createStore function.
redux-code1
Our store is ready now. So we can now proceed to the next stage of connecting the redux store to our React application.
We’ll need to import the Provider component from our react-redux package to do so. We encapsulate it in our App component after that. Any component can access the Redux store, thanks to the Provider:
redux-code
Now the React app is connected with the store! For more information you can connect with @Mechlin.
Hope this blog will be helpful for you!

Author

admin

    Blogs