24-ReduxActionsReducer.md

Lab 24: Redux | Actions and Reducer

Objectives

• Define action types
• Create action creator functions
• Implement a reducer
• Configure the project reducer and state

Steps

Define action types

1. Create the directory src\projects\state.

2. Create the file src\projects\state\projectTypes.js.

3. Define the project actions types.

   src\projects\state\projectTypes.js

   //action types
   export const LOAD_PROJECTS_REQUEST = 'LOAD_PROJECTS_REQUEST';
   export const LOAD_PROJECTS_SUCCESS = 'LOAD_PROJECTS_SUCCESS';
   export const LOAD_PROJECTS_FAILURE = 'LOAD_PROJECTS_FAILURE';
   export const SAVE_PROJECT_REQUEST = 'SAVE_PROJECT_REQUEST';
   export const SAVE_PROJECT_SUCCESS = 'SAVE_PROJECT_SUCCESS';
   export const SAVE_PROJECT_FAILURE = 'SAVE_PROJECT_FAILURE';
   export const DELETE_PROJECT_REQUEST = 'DELETE_PROJECT_REQUEST';
   export const DELETE_PROJECT_SUCCESS = 'DELETE_PROJECT_SUCCESS';
   export const DELETE_PROJECT_FAILURE = 'DELETE_PROJECT_FAILURE';

Create action creator functions

1. Create the file src\projects\state\projectActions.js.

2. Define your action creator functions and return a ThunkAction (function) instead of just an Action (object) to handle the asyncronous nature of the HTTP calls happening.

   src\projects\state\projectActions.js

   import { projectAPI } from '../projectAPI';
   
   import {
     LOAD_PROJECTS_REQUEST,
     LOAD_PROJECTS_SUCCESS,
     LOAD_PROJECTS_FAILURE,
     SAVE_PROJECT_REQUEST,
     SAVE_PROJECT_SUCCESS,
     SAVE_PROJECT_FAILURE,
   } from './projectTypes';
   
   //action creators
   export function loadProjects(page) {
     return (dispatch) => {
       dispatch({ type: LOAD_PROJECTS_REQUEST });
       return projectAPI
         .get(page)
         .then((data) => {
           dispatch({
             type: LOAD_PROJECTS_SUCCESS,
             payload: { projects: data, page },
           });
         })
         .catch((error) => {
           dispatch({ type: LOAD_PROJECTS_FAILURE, payload: error });
         });
     };
   }
   
   export function saveProject(project) {
     return (dispatch) => {
       dispatch({ type: SAVE_PROJECT_REQUEST });
       return projectAPI
         .put(project)
         .then((data) => {
           dispatch({ type: SAVE_PROJECT_SUCCESS, payload: data });
         })
         .catch((error) => {
           dispatch({ type: SAVE_PROJECT_FAILURE, payload: error });
         });
     };
   }

Implement a reducer

1. Create the file src\projects\state\projectReducer.js.
2. Define your reducer function. src\projects\state\projectReducer.js

import { Project } from '../Project';
import {
  LOAD_PROJECTS_REQUEST,
  LOAD_PROJECTS_SUCCESS,
  LOAD_PROJECTS_FAILURE,
  DELETE_PROJECT_REQUEST,
  DELETE_PROJECT_SUCCESS,
  DELETE_PROJECT_FAILURE,
  SAVE_PROJECT_REQUEST,
  SAVE_PROJECT_SUCCESS,
  SAVE_PROJECT_FAILURE,
} from './projectTypes';

export const initialProjectState = {
  projects: [],
  loading: false,
  error: undefined,
  page: 1,
};

export function projectReducer(state = initialProjectState, action) {
  switch (action.type) {
    case LOAD_PROJECTS_REQUEST:
      return { ...state, loading: true, error: '' };
    case LOAD_PROJECTS_SUCCESS:
      let projects;
      const { page } = action.payload;
      if (page === 1) {
        projects = action.payload.projects;
      } else {
        projects = [...state.projects, ...action.payload.projects];
      }
      return {
        ...state,
        loading: false,
        page,
        projects,
        error: '',
      };
    case LOAD_PROJECTS_FAILURE:
      return { ...state, loading: false, error: action.payload.message };
    case SAVE_PROJECT_REQUEST:
      return { ...state };
    case SAVE_PROJECT_SUCCESS:
      let updatedProject = new Project(action.payload);
      if (updatedProject.isNew()) {
        return {
          ...state,
          projects: [...state.projects, updatedProject],
        };
      } else {
        return {
          ...state,
          projects: state.projects.map((project) => {
            return project.id === action.payload.id
              ? Object.assign(new Project(), project, updatedProject)
              : project;
          }),
        };
      }
    case SAVE_PROJECT_FAILURE:
      return { ...state, error: action.payload.message };
    case DELETE_PROJECT_REQUEST:
      return { ...state };
    case DELETE_PROJECT_SUCCESS:
      return {
        ...state,
        projects: state.projects.filter(
          (project) => project.id !== action.payload.id
        ),
      };
    case DELETE_PROJECT_FAILURE:
      return { ...state, error: action.payload.message };
    default:
      return state;
  }
}

Configure the project reducer and state

• update state.js

1. Open the file src\state.js.

2. Configure the projectReducer and ProjectState.

   src\state.js

   import { createStore, applyMiddleware } from 'redux';
   import ReduxThunk from 'redux-thunk';
   import { composeWithDevTools } from 'redux-devtools-extension';
   import { combineReducers } from 'redux';
   
   + import { initialProjectState } from './projects/state/projectReducer';
   + import { projectReducer } from './projects/state/projectReducer';
   
   const reducer = combineReducers({
   +  projectState: projectReducer
   });
   
   ...
   
   
   export const initialAppState = {
   +  projectState: initialProjectState
   };
   
   export const store = configureStore(initialAppState);

3. Verify the application compiles.

In the next lab we will connect our Redux code to our React application.

---

✔ You have completed Lab 24