하이어+플러스! 직원을 위해 내가 구축한 방법은 다음과 같습니다(Redux - 회사).

목적: 후보자는 회사의 프로필을 볼 수 있고 게시한 작업을 볼 수 있습니다.

유형, 조치 및 감속기: 회사 상태

유형

인사이드app > features > company > companyTypes.ts
a에 대한 데이터 유형company . diff 파일에서 가져오기JobData를 가지고 있지만 단순성을 위해 나란히 표시하고 있습니다.

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.tscompany 감속기에 대한 초기 상태를 설정하고 DB에서 getCompany를 호출하여 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;

이것이 프로젝트의 회사/리덕스 부분에 대한 전부입니다. 계속 지켜봐 주세요!