Basic app used making Redux + React hooks
Redux is all about state. So we must first understand what state is :
Whenever we have an application where there are many components and we have multiple states to handle, then props drilling becomes complex. So in that case Redux comes into picture.
You could think of Redux as a box.
- This box organises the state in a single place.
- You can ask the box what the current state is.
- You can describe the changes in the state of the box.
Thus we can say :
Redux is probably the most popular global state management library for react so far. It lets us manage the application in a scalable manner.
Key components of Redux?
The store brings everything together. It holds an applicationholds application state.
The actual action we want to take place, for example, “add product”.
In Redux, actions are plain JS objects, and they must have a type property(e.g. ADD_PRODUCTS)
These specify how the application’s state should change in response to each action. For example, our new state should be one record higher with each new created record.
Basic Notes Application Using REACT HOOKS and REDUX
Create a new react app using the below commands :
Create store.js that contains the global state.
Import the provider from react-redux and wrap it around the parent component that wraps all the components
Create a Reducers folder which will have two files :
- Root reducer
- Notes reducer
Now our major components store, action and reducers are set up. Now we will construct a basic keepers application for which state of notes will be handled by Redux.
The above code will help us to add notes which contain a text field to enter the notes and a button that will add the note in the redux store.
handleChange is called on button click. Here we have a useDispatch() function provided from “react-redux” that helps us to trigger the action we want. Here we have triggered the action “CREATE_NOTES” that would go to the reducer and will find the type and add the notes added in the initial state .
|state, payload  This is how we use Redux //console.log|
Next we will print the state we get from the Redux store for that we have useSelector() method from “react-redux”.
Note: The state.notes should be the same as mentioned in the root reducer.
Get In Touch
How Can We Help ?
We make your product happen. Our dynamic, robust and scalable solutions help you drive value at the greatest speed in the market