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!

Comments

[Julieta]

Hey! To apply for IT/Tech positions, I leave you the referral link to Outdefine, our job board with several remote job searches open for IT or Tech profiles with different levels of seniority in different areas (marketing/software/development, UX and +), in case anyone is interested or knows someone with a tech profile who needs a job: outdefine.com/r/JulietaCura-4363
You can find many jobs for technical and not so technical, but digital profiles too. And you can also get rewards in tokens on the platform, connect with our community of professionals and companies in the Community section, and it's free to use, of course!