Назначение: Кандидат сможет просматривать профиль компании и видеть размещенные ею вакансии.
Типы, действия и редукторы: Состояние компании
Типы
внутри app > features > company > companyTypes.ts.
Типы данных для компании. У меня есть JobData, импортированные из diff-файла, но я показываю бок о бок для простоты.
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;
};
Действия
внутри app > features > company > companySlice.ts
устанавливаю начальное состояние для company reducer, и вызываю getCompany из DB для получения компании по id. Я возвращаю стрингвизированную версию 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);
}
);
Редукторы
Я обработал состояния ответа и установил состояние в соответствии с ним.
В состоянии ответа .fulfilled я получаю эти данные обратно, разбираю их и устанавливаю в состояние.
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;
Это все для части проекта, связанной с компанией/редуктом, следите за новостями!