Start your first React-Redux CRUD Operation Easily
Published: 2022-02-23 10:43:10

If you are a beginners let's start with me.
**How to start**
for new project you can run the below command
_npx create-react-app my-app --template redux_
for existing react project just run
_npm i react-redux_

**Redux-Fundamental**
There are three fundamental concept in redux.Also we can call 3 pillers of redux

1. Store : Store will contain all of the states of our application.
2. Action : Action is just a javascript object.
3. Reducer : Reducer is a javascript pure function. It takes two arguments one is previous state and other is action. we can compare it with useState() hook.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qiyac5wkc1am4r41g71z.jpg)
fig-concept

Now we will start practical work.

**Setup projct**
At first we will create a store . It just a javascript file. Notice the below code

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nypa4qqff8pp104sn4md.png)
fig-store

We created a store using the CreateStore() functioin which is imported from redux. Also the CreateStore function can not take more than one Reducer. So we have used other function combineReducer().Inside the function we can put multiple reducer in an object. Then we have exported the Store file for using it in index/app file. Our store is created. Now we will move on index file. Then we will wrap the app.js file using Provider prop which is provided by react-redux.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5twgdpd6z49vjhjkcaxj.png)
fig-index

**Create An Action File**
We can create multiple action file but today we will create just a single action file for simplicity. Action in redux is just a javacScript object. But we will make a function for reusing the action. Which is called action helper fucntion.
Follow the below code 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/17nio0s9l5vm7bj6avxw.png)
fig-action

Where we have created a javascript file which name is Action.js
Then created 2 action (addMember,removeMember) update action will be created later. Every action has two property one is type.Type is just a string used for identifying the specific action. Other is called payload. We can call it input.

**Creating Reducer:**
 Reducer is a javascript pure function. It takes two arguments one is previous state and other is action. we can compare it with useState() hook.
Follow the code below

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ynm0s9dmhmi0c43hd3vs.png)
fig-reducer

In this code block we created a Reducer which name is TeamReducer. We will work with team member so we created this one. We can create multiple reducer in our application. But we created one.
Reducer has been used in store  as name teams. See the fig-store All of the states of TeamReducer will be stored in the teams.

Notice the TeamReducer it is taking two argument.First is initial state, second is Action. The initial is an empty array.

**Project Description**
Now try to understand the logic. 

**Add Member**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dwgb7mcg4250bakchol8.png)
fig-home
In Home component we used the addMember action in a button at line no 32. We used dispatch functuon which is provided from react-redux.When we will use an action. We have to use the action function inside the dspatch function. Also here is an input field we are getting the value using getText function. And the text is being stored in text state follow the (20,21,22) lines. Follow this below picture

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tnmrr4k7tx8vicxwzle7.png)
fig-ui
when  We clicked on Add member button. The addMember action has been dispatched and one member added in the initial state see the line no 39,40 in fig-reducer.

**Get State From Redux**
Notice the line no 25 in fig-home we get the all teamMembers form state.teams. Which are geting from redux store using useSelector. The useSelector we imported from react-redux.
useSelection function works link map() function. After getting  the all members array then we use normal map(line no 30 in fig-home).

**Remove Member**
When We clicked on Remove button the The removeMember action dispatched (lin-30 fig-home). Then According to logic in TeamReducer (line 41-46 fig-reducer).A single member will be removed from state by one click.
Which happend below. One member gone by clicking Remove.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ayqgum6maizangkqvh6n.png)