Lab 24: Redux | Actions and Reducer

Objectives

  • Define types: actions types, action interfaces, and state
  • Create action creator functions
  • Implement a reducer
  • Configure the project reducer and state

Steps

Define types: actions types, action interfaces, and state

  1. Create the directory src\projects\state.

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

  3. Define the project actions types, action interfaces, and state.

    src\projects\state\projectTypes.ts

    import { Project } from '../Project';
    //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';
    interface LoadProjectsRequest {
    type: typeof LOAD_PROJECTS_REQUEST;
    }
    interface LoadProjectsSuccess {
    type: typeof LOAD_PROJECTS_SUCCESS;
    payload: { projects: Project[]; page: number };
    }
    interface LoadProjectsFailure {
    type: typeof LOAD_PROJECTS_FAILURE;
    payload: { message: string };
    }
    interface SaveProjectRequest {
    type: typeof SAVE_PROJECT_REQUEST;
    }
    interface SaveProjectSuccess {
    type: typeof SAVE_PROJECT_SUCCESS;
    payload: Project;
    }
    interface SaveProjectFailure {
    type: typeof SAVE_PROJECT_FAILURE;
    payload: { message: string };
    }
    interface DeleteProjectRequest {
    type: typeof DELETE_PROJECT_REQUEST;
    }
    interface DeleteProjectSuccess {
    type: typeof DELETE_PROJECT_SUCCESS;
    payload: Project;
    }
    interface DeleteProjectFailure {
    type: typeof DELETE_PROJECT_FAILURE;
    payload: { message: string };
    }
    export type ProjectActionTypes =
    | LoadProjectsRequest
    | LoadProjectsSuccess
    | LoadProjectsFailure
    | SaveProjectRequest
    | SaveProjectSuccess
    | SaveProjectFailure
    | DeleteProjectRequest
    | DeleteProjectSuccess
    | DeleteProjectFailure;
    export interface ProjectState {
    loading: boolean;
    projects: Project[];
    error: string | undefined;
    page: number;
    }

Create action creator functions

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

  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.ts

    import { Action } from 'redux';
    import { ThunkAction } from 'redux-thunk';
    import { projectAPI } from '../projectAPI';
    import { Project } from '../Project';
    import {
    LOAD_PROJECTS_REQUEST,
    LOAD_PROJECTS_SUCCESS,
    LOAD_PROJECTS_FAILURE,
    SAVE_PROJECT_REQUEST,
    SAVE_PROJECT_SUCCESS,
    SAVE_PROJECT_FAILURE,
    ProjectState,
    } from './projectTypes';
    //action creators
    export function loadProjects(
    page: number
    ): ThunkAction<void, ProjectState, null, Action<string>> {
    return (dispatch: any) => {
    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: Project
    ): ThunkAction<void, ProjectState, null, Action<string>> {
    return (dispatch: any) => {
    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.ts.
  2. Define your reducer function. src\projects\state\projectReducer.ts
import {
ProjectActionTypes,
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,
ProjectState,
} from './projectTypes';
import { Project } from '../Project';
export const initialProjectState: ProjectState = {
projects: [],
loading: false,
error: undefined,
page: 1,
};
export function projectReducer(
state = initialProjectState,
action: ProjectActionTypes
) {
switch (action.type) {
case LOAD_PROJECTS_REQUEST:
return { ...state, loading: true, error: '' };
case LOAD_PROJECTS_SUCCESS:
let projects: Project[];
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:
if (action.payload.isNew) {
return {
...state,
projects: [...state.projects, action.payload],
};
} else {
return {
...state,
projects: state.projects.map((project: Project) => {
return project.id === action.payload.id
? Object.assign({}, project, action.payload)
: 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) => 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.ts

  1. Open the file src\state.ts.

  2. Configure the projectReducer and ProjectState.

    src\state.ts

    import { createStore, applyMiddleware } from 'redux';
    import ReduxThunk from 'redux-thunk';
    import { composeWithDevTools } from 'redux-devtools-extension';
    import { combineReducers } from 'redux';
    + import { ProjectState } from './projects/state/projectTypes';
    + import { initialProjectState } from './projects/state/projectReducer';
    + import { projectReducer } from './projects/state/projectReducer';
    const reducer = combineReducers({
    + projectState: projectReducer
    });
    ...
    export interface AppState {
    + projectState: ProjectState;
    }
    export const initialAppState: AppState = {
    + 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

Edit this page