Redux Overview:
Redux is a state management library for JavaScript apps, providing a centralized store to
manage the state of your application predictably and consistently.
Actions:
Actions are plain JavaScript objects that describe what happened in the application. They
usually have a type and payload.
Reducers:
Reducers are pure functions that take the current state and an action as arguments, and return
a new state. They specify how the application's state changes in response to actions.
Store:
The store is the object that brings actions and reducers together.
Types:
Types are constants that define the type of actions. They help avoid typos and make the code
more maintainable.
Action File(userActions.js) :
import { ADD_USER } from '../types';
export const addUser = (user) => ({
type: ADD_USER,
payload: user,
});
Reducer File(userReducer.js) :
import { ADD_USER } from '../types';
const initialState = {
users: [],
};
const userReducer = (state = initialState, action) => {
switch (action.type) {
case ADD_USER:
return {
...state,
users: [...state.users, action.payload],
};
default:
return state;
}
};
export default userReducer;
Store.js:
import { createStore, combineReducers, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import { composeWithDevTools } from 'redux-devtools-extension';
import userReducer from './reducers/userReducer';
const rootReducer = combineReducers({
user: userReducer,
});
const middleware = [thunk];
const store = createStore(
rootReducer,
composeWithDevTools(applyMiddleware(...middleware))
);
export default store;
Type File(type.js):
export const ADD_USER = 'ADD_USER';
Component File(helloComponent):
import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { addUser } from './redux/actions/userActions';
const SomeComponent = () => {
const dispatch = useDispatch();
const users = useSelector(state => state.user.users);
const handleAddUser = () => {
const newUser = { name: 'John Doe' };
dispatch(addUser(newUser));
};
return (
<div>
<button onClick={handleAddUser}>Add User</button>
<ul>
{users.map((user, index) => (
<li key={index}>{user.name}</li>
))}
</ul>
</div>
);
};
export default SomeComponent;
KeyWords:
userActions.js defines an action creator addUser that creates an action to add a user.
userReducer.js handles the action and updates the state by adding a new user.
store.js sets up the Redux store with the user reducer and middleware.
types.js defines the action type constant to avoid typos.
SomeComponent.jsx demonstrates how to dispatch actions and select state from the store
using React-Redux hooks.
In case we are handling apis:(we have to handle like this)
import { FETCH_USER_REQUEST, FETCH_USER_SUCCESS, FETCH_USER_FAILURE }
from './types';
export const fetchUser = () => async (dispatch) => {
dispatch({ type: FETCH_USER_REQUEST });
try {
const response = await fetch('https://api.example.com/users');
const data = await response.json();
dispatch({ type: FETCH_USER_SUCCESS, payload: data });
} catch (error) {
dispatch({ type: FETCH_USER_FAILURE, payload: error.message });
}
};
