Slice pattern type issue?

[frontendjulien]

Hello guys!

I'm new to Zustand and currently trying to implement a slice pattern with TypeScript. However, I'm encountering a type error when attempting to combine multiple slices into a single store.

Problem
I'm trying to create a CompanyStore that combines CompanyProfileSlice and CompanyCreateNewJobPostingSlice, but I'm getting the following error:

NOTE!: I combined the types of two slices together for CompanyStore

  Types of parameters 'nextStateOrUpdater' and 'nextStateOrUpdater' are incompatible.
    Type 'CompanyProfileSlice | ((state: WritableDraft<CompanyProfileSlice>) => void)' is not assignable to type 'CompanyStore | ((state: WritableDraft<CompanyStore>) => void)'.
      Type 'CompanyProfileSlice' is not assignable to type 'CompanyStore | ((state: WritableDraft<CompanyStore>) => void)'.
        Type 'CompanyProfileSlice' is not assignable to type 'CompanyStore'.
          Type 'CompanyProfileSlice' is missing the following properties from type 'JobPostingState': LocCriteria, JobPostingForm

Code Snippet
Here's how I have set up my CompanyStore and the slices:

Company Store Setup:

import { create } from "zustand";
import { immer } from "zustand/middleware/immer";
import { CompanyStore } from "@/types/company/company-store";
import { devtools, persist, subscribeWithSelector } from "zustand/middleware";

// SLICES
import { createCompanyProfileSlice, CompanyProfileSlice } from "./company-profile-slice";
import { createCompanyNewJobPostingSlice, CompanyCreateNewJobPostingSlice } from "./company-create-new-job-posting-slice";

export type CompanyStore = CompanyProfileSlice &
  CompanyCreateNewJobPostingSlice;

export const useCompanyStore = create<CompanyStore>()(
  devtools(
    persist(
      subscribeWithSelector(
        immer((...a) => ({
          ...createCompanyProfileSlice(...a),
          ...createCompanyNewJobPostingSlice(...a),
        })),
      ),
      {
        name: "company-storage",
      },
    ),
  ),
);

COMPANY PROFILE SLICE

import { StateCreator } from "zustand";
import { CompanyProfile } from "@/types/company/company-profile-slice";

export type CompanyProfile = {
  companyName: string;
  companyUEN: string;
  companyRep: string;
  companyRepEmail: string;
};

type CompanyProfileState = {
  company: CompanyProfile;
};

type CompanyProfileActions = {
  updateCompanyProfile: (company: Partial<CompanyProfile>) => void;
};

export type CompanyProfileSlice = CompanyProfileState & CompanyProfileActions;

const initialState: CompanyProfile = {
  companyName: "",
  companyUEN: "",
  companyRep: "",
  companyRepEmail: "",
};

export const createrCompanyProfileSlice: StateCreator<
  CompanyProfileSlice,
  [["zustand/immer", never]],
  []
> = (set) => ({
  company: initialState,

  updateCompanyProfile: (company) =>
    set((state) => ({ company: { ...state.company, ...company } })),
});

COMPANY CREATE NEW JOB SLICE

import { StateCreator } from "zustand";
import {
  LocCriteria,
  JobPostingForm,
} from "@/types/company/company-create-new-job";


export type LocCriteria = {
  selectedCourse: string;
  jobTitle: string;
}

export type JobPostingForm = {
  startingSalary: string;
  location: string;
  jobDescription: string;
  selectedSkills: string[];
  numOfNewTrainee: number,
  typeOfWorkingHours: string,
  numberOfWorkingDays: number,
  postTrainingBond: string,
  numberOfStaff: number,
  clearanceCheck: string,
  
}

type JobPostingState = {
  LocCriteria: LocCriteria;
  JobPostingForm: JobPostingForm;
};

type JobPostingActions = {
  updateLocCriteria: (LocCriteria: LocCriteria) => void;
  updateJobPostingForm: (form: Partial<JobPostingForm>) => void;
};

export type CompanyCreateNewJobPostingSlice = JobPostingState &
  JobPostingActions;

const initialState: JobPostingState = {
  LocCriteria: {
    selectedCourse: "",
    jobTitle: "",
  },
  JobPostingForm: {
    startingSalary: "",
    location: "",
    jobDescription: "",
    selectedSkills: [],
    numOfNewTrainee: 0,
    typeOfWorkingHours: "",
    numberOfWorkingDays: 0,
    postTrainingBond: "",
    numberOfStaff: 0,
    clearanceCheck: "",
  },
};

export const createCompanyNewJobPostingSlice: StateCreator<
  CompanyCreateNewJobPostingSlice,
  [["zustand/immer", never]],
  [],
  CompanyCreateNewJobPostingSlice
> = (set) => ({
  ...initialState,

  updateLocCriteria: (LocCriteria) =>
    set((state) => ({
      LocCriteria: { ...state.LocCriteria, ...LocCriteria },
    })),

  updateJobPostingForm: (form) =>
    set((state) => ({
      JobPostingForm: { ...state.JobPostingForm, ...form },
    })),

});

How can I resolve this type error?
What adjustments should I make to my slices or store setup to ensure proper type compatibility?
Thank you so much guys!

[dbritto-dev]

@frontendjulien as far as I can see some types are missing, types for devtools, subscribeWithSelector, and persist

[frontendjulien]

Thank you so much @dbritto-dev for your answer! I had to add the types to each slice.

export const companyProfileSlice: StateCreator<
  CompanyStore,
  [["zustand/devtools", never]],
  [
    ["zustand/persist", CompanyStore],
    ["zustand/subscribeWithSelector", never],
    ["zustand/immer", never],
  ],
  CompanyProfileSlice
> = (set) => ({
  company: initialState,

  updateCompanyProfile: (company) =>
    set((state) => ({ company: { ...state.company, ...company } })),
});