When we use react , we use components which is used in different section of website. But there is a problem when we change the state of any component then where that component is already in use will not change the state of that section. Redux is the solution of this problem. Redux provide us a central store where component goes and updates its state and from there wherever the store data is using in that section data is also updated.
Mainly Redux provides us three different sections.
Actions- when an event is happened in components than action function is called. Actions tells us that what type of action has to be taken. Payloads are passed to reducers through action.
Reducers- It receives the payloads and the previous state after manipulating it return the updated state.
Store- It is place where all the state application is listed. It manages the status o application. Any component can use it directly.
Here I am creating a screen , there will be an input field when click on the add bird button then the data will be dispatched to the action and from action it will tell the reducer that what type action is to be taken and reducer do its task accordingly. Updated state will be manage by store and then it will display on the scree.
Actions
const ADD_BIRD = 'ADD_BIRD';
const INCREMENT_BIRD = 'INCREMENT_BIRD';
export function addBird(bird) {
return {
type: ADD_BIRD,
bird,
}
}
export function incrementBird(bird) {
return {
type: INCREMENT_BIRD,
bird
}
}Here two actions are created ADD_BIRD to add bird and INCREMENT_BIRD is to increment the bird.
Reducers
function birds(state=defaultBirds, action) {
switch (action.type) {
case ADD_BIRD:
return [
...state,
{
name: action.bird,
views: 1
}
];
case INCREMENT_BIRD:
const bird = state.find(b => action.bird === b.name);
const birds = state.filter(b => action.bird !== b.name);
return [
...birds,
{
...bird,
views: bird.views + 1
}
];
default:
return state;
}
}Reducer function birds are taking two arguments previous state and action. Here the notice point is that we are not changing the existing state we are creating a new array and returning the new array. One more important point is that if the action type is not found in reducer function then we are going to return previous state by default.
Store
import { combineReducers } from 'redux';
const birdApp = combineReducers({
birds
});
export default birdApp;There should be only one store in react.js but we need more than one store . Redux provide us CombineReducers which helps us in solving this problem in which we can give more than one store in the form of object.
Homescreen
import React, { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux'
import { addBird, incrementBird } from './store/birds/birds';
import './App.css';
function App() {
const [birdName, setBird] = useState('');
const birds = useSelector(state => state.birds);
const dispatch = useDispatch();
const handleSubmit = event => {
event.preventDefault();
dispatch(addBird(birdName))
setBird('');
};
return (
<div className="wrapper">
<h1>Bird List</h1>
<form onSubmit={handleSubmit}>
<label>
<p>
Add Bird
</p>
<input
type="text"
onChange={e => setBird(e.target.value)}
value={birdName}
/>
</label>
<div>
<button type="submit">Add</button>
</div>
</form>
<ul>
{birds.map(bird => (
<li key={bird.name}>
<h3>{bird.name}</h3>
<div>
Views: {bird.views}
<button onClick={() => dispatch(incrementBird(bird.name))}><span role="img" aria-label="add">➕</span></button>
</div>
</li>
))}
</ul>
</div>
);
}
export default App;UseSelector is a custom hook by which we are able access the store data any where in the program . useDispatch is used to dispatch the data from the component to action function. There is a form in which user can enter the new bird name. Adding a new bird to the list is the changing of state of previous list, because state of list is changed and we can not directly change state of any variable. To change the state we have to use useState hook, therefore we have imported useState from react.
When anyone click on the button add the the data is dispatched to action function and from there it checks what type data is to be passed to reducer in the form of payload. Reducer takes previous state and action and does work according to the action type and if there is a match it update the store and then updated store data is displayed on the screen. In this way redux works.
Are you new to React.js or Just started learning and struggling with react.js project? We have team of react.js developer to help you in react.js project, assignment and for learning react.js at affordable price.
Comments