使用減速機typescript：State型

Question

實現減速機時state類型怎么辦？ 我有屬性和功能。

export interface State {
  form: boolean;
  errorForm: boolean;
  projects: ProjectI[];
  project: ProjectI;
  showFormFn(): void;
  getProjectsFn(): void;
  addProjectFn(project: ProjectI): void;
  showErrorFn(): void;
  currentProjectFn(projectId: string): void;
  deleteProjectFn(projectId: string): void;
}

但我在使用鈎子並嘗試初始化 state 時遇到問題。 什么是正確的實施方式？

Answer 1

這是一種以經典方式實現它的方法：

interface ProjectI {
    id: string;
}

export interface State {
    form: boolean;
    errorForm: boolean;
    projects: ProjectI[];
    project: ProjectI;
    showFormFn(): void;
    getProjectsFn(): void;
    addProjectFn(project: ProjectI): void;
    showErrorFn(): void;
    currentProjectFn(projectId: string): void;
    deleteProjectFn(projectId: string): void;
}

type Actions = { type: 'addProject', payload: ProjectI } | { type: 'setProject', payload: ProjectI } | { type: 'error' }

function reducer(state: State, action: Actions) {
    switch (action.type) {
        case 'addProject':
            return { ...state, projects: state.projects.concat(action.payload) };
        case 'setProject':
            return { ...state, project: action.payload };
        case 'error':
            return { ...state, errorForm: true };
        default:
            return state;
    }
}

TS Playground從這里顯示 typescript 中存在的類型。