What is Redux?

Redux is a JavaScript library for managing and centralizing application state. It's often used with React but can be used with any JavaScript framework.

What is Redux toolkit?

Redux Toolkit is our official standard approach for writing Redux logic

  • Redux Toolkit can help you make your Redux code better.

Normally in React How to pass data?

The data in React always flows from parent to child components which makes it unidirectional.

  • Action
  • Reducer
  • Store Redux Working 1- Installation of Redux toolkit
npm install @reduxjs/toolkit

Define Action Name

  • Create a File in the src/constants/Student.js
export const GET_STUDENT_INIT = "GET_STUDENT_INIT";
export const GET_STUDENT_SUCCESS = "GET_STUDENT_SUCCESS";
export const GET_GOAL_FAILURE = "GET_STUDENT_FAILURE";

export const ADD_STUDENT_INIT = "ADD_STUDENT_INIT";
export const ADD_STUDENT_SUCCESS = "ADD_STUDENT_SUCCESS";
export const ADD_GOAL_FAILURE = "ADD_STUDENT_FAILURE";

export const DELETE_STUDENT_INIT = "DELETE_STUDENT_INIT";
export const DELETE_STUDENT_SUCCESS = "DELETE_STUDENT_SUCCESS";
export const DELETE_GOAL_FAILURE = "DELETE_STUDENT_FAILURE";

export const EDIT_STUDENT_INIT = "EDIT_STUDENT_INIT";
export const EDIT_STUDENT_SUCCESS = "EDIT_STUDENT_SUCCESS";
export const EDIT_STUDENT_FAILURE = "EDIT_STUDENT_FAILURE";

Actions

  • create a action file name /src/store/action/studentActions.js
  • Importing all the Export variables in the Redux Action
import {
  GET_STUDENT_INIT,
  GET_STUDENT_SUCCESS,
  GET_STUDENT_FAILURE,
  ADD_STUDENT_INIT,
  ADD_STUDENT_SUCCESS,
  ADD_STUDENT_FAILURE,
  DELETE_STUDENT_INIT,
  DELETE_STUDENT_SUCCESS,
  DELETE_STUDENT_FAILURE,
  EDIT_STUDENT_INIT,
  EDIT_STUDENT_SUCCESS,
  EDIT_STUDENT_FAILURE,
} from "constants/Student";
  • Then create the Action on the studentAction.js
  • Action has two types one is (payload) another is (data)
  • (payload) is the name of the action type and we give the action name that come from constants/StudentTypes.js
  • (data) is take as a parameter

// After setup the StudentSource.js file then import this Function in the StudentActions.js

import {
  getStudent,
  postStudent,
  editStudent,
  deleteStudent,
} from 'sources/StudentSource';

export const addStudentInit = ()=>{
 payload:ADD_STUDENT_INIT
}
export const addStudentSuccess = (data)=>{
 payload:ADD_STUDENT_SUCCESS,
 data
}
export const addStudentFailure = ()=>{
 payload:ADD_STUDENT_FAILURE
}

export const getStudentInit = ()=>{
 payload:GET_STUDENT_INIT
}
export const getStudentTypeSuccess = (data)=>{
 payload:GET_STUDENT_SUCCESS,
 data
}
export const getStudentFailure = ()=>{
 payload:GET_STUDENT_FAILURE
}

export const deleteStudentInit = ()=>{
 payload:EDIT_STUDENT_INIT
}
export const deleteStudentSuccess = (data)=>{
 payload:EDIT_STUDENT_SUCCESS,
 data,
}
export const deleteStudentFailure = ()=>{
 payload:EDIT_STUDENT_FAILURE,
}

export const editStudentInit = ()=>{
 payload:EDIT_STUDENT_INIT
}
export const editStudentSuccess = (data)=>{
 payload:EDIT_STUDENT_SUCCESS,
 data
}
export const editStudentFailure = ()=>{
 payload:EDIT_STUDENT_FAILURE
}
// creating Student the Action thunk

export const getStudentAction = ()=> getStudent();
export const editStudentAction = (requestObject)=> (dispatch) => {
  dispatch(editStudent(requestObject));
};
export const postStudentAction = (requestObject)=> (dispatch) => {
  dispatch(postStudent(requestObject));
};
export const deleteStudentAction = (requestObject)=> (dispatch) => {
  dispatch(deleteStudent(requestObject));
};

Reducer

src/store/reducers/StudentReducer.js import the variables from src/constants/Student.js

import {
GET_STUDENT_INIT, GET_STUDENT_SUCCESS, GET_STUDENT_FAILURE,
ADD_STUDENT_INIT, ADD_STUDENT_SUCCESS, ADD_STUDENT_FAILURE,
DELETE_STUDENT_INIT,DELETE_STUDENT_SUCCESS,DELETE_STUDENT_FAILURE,
EDIT_STUDENT_INIT,EDIT_STUDENT_SUCCESS,EDIT_STUDENT_FAILURE,
} from "constants/Student"

const initialState = {
 student:[],
 isLoading:false,
 error:null;
}
export const studentReducer = (state = initialState,action)=>{
   case GET_STUDENT_INIT:
    return {
         ...state,
         loading:true,
	}
    break;
   case GET_STUDENT_SUCCESS:
    return {
         ...state,
         isLoading:false,
         student:[action.data]
	}
    break;
   case GET_STUDENT_FAILURE:
    return {
         ...state,
         isLoading:false,
        error: action.data,
	}
    break;
   case ADD_STUDENT_INIT:
    return {
         ...state,
         isLoading:true,
	}
    break;
   case ADD_STUDENT_SUCCESS:
	return {
         ...state,
         isLoading: false,
         student: action.data,
      }
    break;
   case ADD_STUDENT_FAILURE:
    return {
         ...state,
         loading:false,
         error: action.data,
      }
    break;
   case DELETE_STUDENT_INIT:
    return {
         ...state,
         loading:true,
	}
    break;
   case DELETE_STUDENT_SUCCESS:
	return {
         ...state,
         isLoading: false,
       student: state.student.filter((type) => type.id !== action.data.id),
      }
    break;
   case DELETE_STUDENT_FAILURE:
    return {
         ...state,
         loading:false,
        error: action.data,
	}
    break;
   case EDIT_STUDENT_INIT:
    return {
         ...state,
         loading:true,
	}
    break;
   case EDIT_STUDENT_SUCCESS:
      return {
        ...state,
        loading: false,
        student: state.student.map((type) => {
          if (type.id === action.data.id) {
            return action.data;
          }
          return type;
        }),
      };
    break;
   case EDIT_STUDENT_FAILURE:
    return {
         ...state,
         loading:false,
        error: action.data,
	}
    break;
   default;
    state
}

export default studentReducer;

Define API_URL

  • Create a file /src/configs/constants.js
export const studentsUrls = {
  GET: `${API_URL}/student`,
  PUT: `${API_URL}/student`,
  POST: `${API_URL}/student`,
  GET_ALL: `${API_URL}/student/all`,
  DELETE: `${API_URL}/student/{studentId}`,
};

Fetch Data Using Axios

  • Create a file /src/sources/StudentSource.js
  • In this file you can make a Get,Post,Delete,Put Request
  • Import the API URL from /src/configs/constants.js that is studentsUrls
  • Import the action from the src/store/actions/studentActions.js
import {studentsUrls} from "configs/constants"
import {
 getStudentInit, getStudentSuccess, getStudentFailure
 addStudentInit, addStudentSuccess, addStudentFailure
 deleteStudentInit, deleteStudentSuccss, deleteStudentFailure,
 editStudentInit, editStudentSuccess, editStudentFailure
} from "store/actions/StudentActions.js"

$ npm install axios

import axios from "axios";

:: Basically 3 functions are made
getStudent,
postStudent,
deleteStudent,
editStudent,

const cache = {};
export const getStudent = () => (dispatch) => {
  dispatch(getEmploymentInit());
  const url = getStudentInit.GET;
  axios
    .get(url)
    .then((response) => {
      cache.Student = response.data.data;
      dispatch(getStudentSuccess(response.data.data));
    })
    .catch(() => {
      notification.error({
        message: 'Error in Getting Student Data',
      });
      dispatch(getStudentFailure());
    });
};

export const postStudent = (request) => (dispatch) => {
  const url = addStudent.POST;
  dispatch(addStudentInit());
  axios
    .post(url, request)
    .then((response) => {
      if (response.status === 200) {
        notification.success({
          message: 'Created Successfully',
        });
        dispatch(addStudentSuccess(response.data.data));
      } else {
        notification.error({
          message: 'Error in creating a new Student',
        });
        dispatch(addStudentFailure(response.data.data));
      }
    })
    .catch((error) => {
      notification.error({
        message: 'Entered Student already exists. Cannot add it again',
      });
      dispatch(addStudentFailure(error));
    });
};

export const editStudent = (request) => (dispatch) => {
  const url = studentsUrls.PUT.replace('{:id}', request.id);
  dispatch(editStudentInit());
  axios
    .put(url, request)
    .then((response) => {
      if (response.status === 200) {
        notification.success({
          message: 'Updated Successfully',
        });
        dispatch(editStudentSuccess(request));
      } else {
        notification.error({
          message: 'Error in editing the Student',
        });
      }
    })
    .catch(() => {
      notification.error({
        message: 'Entered Student already exists. Cannot add it again',
      });
      dispatch(editStudentFailure());
    });
};

export const deleteStudent = (request) => (dispatch) => {
  const url = studentsUrls.DELETE.replace('{:id}', request.id);
  dispatch(deleteStudentInit());
  axios
    .delete(url, { data: request })
    .then((response) => {
      if (response.status === 200) {
        dispatch(deleteStudentSuccess({ id: request.id }));
        notification.success({
          message: 'Deleted Successfully',
        });
      } else {
        notification.error({
          message: 'Cannot delete because the Student is associated with students',
        });
        dispatch(deleteStudentFailure());
      }
    })
    .catch(() => {
      notification.error({
        message: 'Cannot delete because the Student is associated with students',
      });
    });
};

Connect to the component using containers

/src/containers/StudentContainers.js

import { connect } from "react-redux";
// Import the Component that you want to connect with them
import studentComponent from "components/student/StudentComponent";

import {
  getStudentAction,
  addStudentAction,
  editStudentAction,
  deleteStudentAction,
} from "store/actions/StudentActions";

function mapStateToProps(state) {
  const { studentReducer, auth } = state;
  const { student, isLoading } = studentReducer;
  return {
    student,
    isLoading,
  };
}

function mapDispatchToProps(dispatch) {
  return {
    getStudentAction: () => dispatch(getStudentAction()),
    addStudent: (request) => dispatch(addStudentAction(request)),
    editStudent: (request) => dispatch(editStudentAction(request)),
    deleteStudent: (request) => dispatch(deleteStudentAction(request)),
  };
}
const EmploymentContainer = connect(
  mapStateToProps,
  mapDispatchToProps
)(StudentComponent);
export default EmploymentContainer;
Back to Blogs