하이어+플러스! 직원을 위해 제가 구축한 방법은 다음과 같습니다(Redux - Job).
11794 단어 tutorialwebdevreactprogramming
유형, 작업 및 리듀서: 작업 상태
유형
인사이드
app > features > job > jobTypes.ts
작업의 데이터 유형.export type JobData = {
id: string;
companyName: string;
position: string;
location: string;
salary: string;
datePosted: string;
jobType: string;
applyUrl: string;
description: string;
};
행위
인사이드
app > features > job > jobSlice.ts
job
리듀서의 초기 상태입니다. getPostedJobs
DB에서 모든 작업을 가져오고 문자열화된 버전을 반환합니다. getPostedJobById
는 id
에 의해 하나의 작업을 가져오고 하나의 작업의 문자열화된 버전을 반환합니다.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);
}
);
감속기
응답 상태를 처리하고 그에 따라 상태를 설정했습니다.
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;
프로젝트의 작업/리덕스 부분은 여기까지입니다. 계속 지켜봐 주세요!
Reference
이 문제에 관하여(하이어+플러스! 직원을 위해 제가 구축한 방법은 다음과 같습니다(Redux - Job).), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/ajeasmith/hiring-platform-app-hireplus-heres-how-i-built-it-redux-job-1le1텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)