Hire+Plus! For Employees Here's how I built it (Redux - Job)

Purpose: The candidate will be able to view jobs and view single job details.

Types, Actions, and Reducers: Job State

Types

inside app > features > job > jobTypes.ts
Data types for a job.

export type JobData = {
    id: string;
    companyName: string;
    position: string;
    location: string;
    salary: string;
    datePosted: string;
    jobType: string;
    applyUrl: string;
    description: string;
};

---

Actions

inside app > features > job > jobSlice.ts
The initial state for job reducer. getPostedJobs gets all jobs from DB and returns the stringified version. getPostedJobById gets one job by id and returns the stringified version of one job.

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import { getJobById, getJobs } from '../../../utils/firebase/firebase.utils';
import { JobData } from './jobTypes';

interface jobState {
    jobs: JobData[];
    isLoading: boolean;
}
const initialState: jobState = {
    jobs: [],
    isLoading: false,
};

export const getPostedJobs = createAsyncThunk('job/getJobs', async () => {
    const jobs = await getJobs();
    return JSON.stringify(jobs);
});
export const getPostedJobById = createAsyncThunk(
    'job/getJobById',
    async (id: string) => {
        const jobs = await getJobById(id);
        const [jobObj] = jobs;
        return JSON.stringify(jobObj);
    }
);

---

Reducer

I handled the response states and set the state accordingly.

const JobSlice = createSlice({
    name: 'job',
    initialState,
    reducers: {},
    extraReducers: (builder) => {
        builder
            .addCase(getPostedJobs.pending, (state) => {
                state.isLoading = true;
            })
            .addCase(getPostedJobs.fulfilled, (state, action) => {
                state.isLoading = false;
                state.jobs = JSON.parse(action.payload);
            })
            .addCase(getPostedJobs.rejected, (state, action) => {
                state.isLoading = false;
                console.log('error with jobs', action.error);
            })
            .addCase(getPostedJobById.pending, (state) => {
                state.isLoading = true;
            })
            .addCase(getPostedJobById.fulfilled, (state, action) => {
                state.isLoading = false;
                state.jobs = JSON.parse(action.payload);
            })
            .addCase(getPostedJobById.rejected, (state, action) => {
                state.isLoading = false;
                console.log('error with getting job by id', action.error);
            });
    },
});

export default JobSlice.reducer;

That's all for the job/redux portion of the project, stay tuned!