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

목적: 후보자는 자신의 프로필을 보고 편집할 수 있습니다.

유형, 작업 및 리듀서: 프로필 상태

유형

인사이드app > features > profile > profileTypes.ts프로필의 데이터 유형. UpdatedFields는 프로필 페이지를 업데이트하는 데 필요한 유일한 필드입니다.

export type ProfileData = {
    id: string;
    email: string;
    createdAt: number;
    headline: string;
    isForHire: boolean;
    websiteURL: string;
    skills: string[];
    summary: string;
    projects: ProjectData[];
    experience: ExperienceData[];
};
export type ExperienceData = {
    date: string;
    position: string;
    positionSummary: string;
};
export type ProjectData = {
    date: string;
    title: string;
    summary: string;
    github: string;
    projectUrl: string;
};

export type UpdatedFields = {
    id: string;
    headline: string;
    summary: string;
    isForHire: boolean;
    websiteURL: string;
    skills: string[];
    experience: ExperienceData[];
    projects: ProjectData[];
};

행위

인사이드app > features > profile > profileSlice.ts프로필 감속기의 초기 상태입니다. getProfileById는 id에 의해 프로필을 가져오고 문자열화된 버전을 반환합니다. updateProfileById 프로필을 업데이트합니다.

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import { getProfile, updateUserProfileById } from '../../../utils/firebase/firebase.utils';
import { signoutUser } from '../auth/authSlice';
import { ProfileData, UpdatedFields } from './profileTypes';

interface userState {
    profile: ProfileData;
    isLoading: boolean;
    isEditting: boolean;
}
const initialState: userState = {
    profile: {
        id: '',
        email: '',
        createdAt: Date.now(),
        headline: '',
        isForHire: false,
        websiteURL: '',
        skills: [],
        summary: '',
        projects: [],
        experience: [],
    },
    isLoading: false,
    isEditting: false,
};

export const getProfileById = createAsyncThunk(
    'profile/getProfileById',
    async (id: string) => {
        const profile = await getProfile(id);
        const [profileObj] = profile;
        return JSON.stringify(profileObj);
    }
);
export const updateProfileById = createAsyncThunk(
    'profile/updateProfileById',
    async (data: UpdatedFields): Promise<void> => {
        await updateUserProfileById(data);
    }
);

감속기

setEditView - 편집이 true로 설정된 경우 후보자가 자신의 프로필을 편집할 수 있는 편집 페이지가 표시됩니다.setProjects - 편집 페이지에서 프로젝트를 설정합니다.setExperiences - 편집 페이지에서 경험을 설정합니다.
extraReducers: 응답 상태를 처리하고 그에 따라 상태를 설정했습니다.

const profileSlice = createSlice({
    name: 'profile',
    initialState,
    reducers: {
        setEditView(state, action) {
            state.isEditting = action.payload;
        },
        setProjects(state, action) {
            state.profile.projects = action.payload;
        },
        setExperiences(state, action) {
            state.profile.experience = action.payload;
        },
    },
    extraReducers: (builder) => {
        builder
            .addCase(getProfileById.pending, (state) => {
                state.isLoading = true;
            })
            .addCase(signoutUser.fulfilled, (state) => {
                state.profile = {
                    id: '',
                    email: '',
                    createdAt: Date.now(),
                    headline: '',
                    isForHire: false,
                    websiteURL: '',
                    skills: [],
                    summary: '',
                    projects: [],
                    experience: [],
                };
            })
            .addCase(getProfileById.fulfilled, (state, action) => {
                state.isLoading = false;
                state.profile = JSON.parse(action.payload);
            })
            .addCase(getProfileById.rejected, (state, action) => {
                state.isLoading = false;
                console.log('error with profile', action.error);
            });
    },
});

export const { setEditView, setProjects, setExperiences } =
    profileSlice.actions;

export default profileSlice.reducer;

프로젝트의 프로필/리덕스 부분은 여기까지입니다. 계속 지켜봐 주세요!