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

Purpose: The candidate will be able to view a company's profile, and see the jobs they posted.

Types, Actions and Reducers: Company state

Types

inside app > features > company > companyTypes.ts

Data types for a company. I have JobData imported from diff file, but I'm showing side-by-side for simplicity.

export type CompanyData = {
 id: string;
 companyName: string;
 companyDescription: string;
 companyUrl: string;
 email: string;
 isHiring: boolean;
 companySize: string;
 jobs: JobData[];
};

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 > company > companySlice.ts
setting the initial state for company reducer, and call getCompany from DB to get a company by id. I return the stringifyed version of the company.

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import { getCompanyById } from '../../../utils/firebase/firebase.utils';
import { CompanyData } from './companyTypes';

interface companyState {
 company: CompanyData;
 isLoading: boolean;
}
const initialState: companyState = {
 company: {
   id: '',
   companyName: '',
   companyDescription: '',
   companyUrl: '',
   email: '',
   isHiring: false,
   companySize: '',
   jobs: [],
 },
 isLoading: false,
};

export const getCompany = createAsyncThunk(
 'job/getCompanyById',
 async (id: string) => {
 const company = await getCompanyById(id);
 const [companyObj] = company;
 return JSON.stringify(companyObj);
 }
);

---

Reducers

I handled the response states and set the state accordantly.
On the .fulfilled response state, I get this data back, parse it and set it to state.

const companySlice = createSlice({
 name: 'job',
 initialState,
 reducers: {},
 extraReducers: (builder) => {
  builder
   .addCase(getCompany.pending, (state, action) => {
     state.isLoading = true;
   })
   .addCase(getCompany.fulfilled, (state, action) => {
     state.isLoading = false;
     state.company = JSON.parse(action.payload);
   })
   .addCase(getCompany.rejected, (state, action) => {
     state.isLoading = false;
     console.log('error with company data', action.error);
   });
 },
});

export default companySlice.reducer;

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