Declarative entity management

entity-feature-declarative.ts

  // shared/api/contracts.ts
  export type CompanyDetailed = {
    id: string;
    name: string;
    type: 'outcome' | 'income';
    notes: string;
    isLiked: boolean;
  };

  // shared/api/api-company/thunks.ts
  /**
   * Here can be any other reactive primitive
   * like effector, redux, rxjs, mobx etc.
   */
  export const getComaniesThunk = createAsyncThunk(
    'companies/get',
    async () => {
      const response: CompanyDetailed[] = await getComanies();
      return response;
    }
  );
  export const patchCompanyLightThunk = createAsyncThunk(
    'companies/like-company',
    async ({ id, ...companyPartial }: { id: number; like: boolean }) => {
      const response: CompanyDetailed = await patchCompany({
        id,
        ...companyPartial
      });
      return response;
    }
  );

  // entities/company.ts
  export const companiesSlice = createSlice({
    name: 'entities/companies',
    reducers: {...},
    extraReducers: builder => {
      builder.addCase(getComaniesThunk.fulfilled, (state, action) => {
        state.companies = action.payload;
      });
      builder.addCase(likeComanyThunk.fulfilled, (state, action) => {
        const { id } = action.payload;
        const index = state.companies.findIndex(company => company.id === id);
        state.companies[index] = action.payload;
      });
    }
  });

  // features/manage-company-like.ts
  export const manageCompanyLikeSlice = createSlice({
    name: 'features/manage-company-like',
    reducers: {...},
    extraReducers: builder => {
      builder.addCase(likeComanyThunk.fulfilled, (state, action) => {
        // manage internal feature state
      });
    }
  });

  export const manageLikeThunk = createAsyncThunk(
    'features/manage-company-like',
    async ({ id, like }: { id: number; like: boolean }) => {
      const response: CompanyDetailed = await patchCompanyLightThunk({
        id,
        isLiked: like
      });
      return response;
    }
  );