Question regarding Immer in combination with no store actions.

[JKannekens]

I want to use immer in combination with no store actions, because I want to have all the actions in separate files. However when I add the immer middleware. It doesn't get the correct type for the state. I am not sure if I am doing this correctly, but if I would move the State type from create to Immer it works.

Example:

interface Todo {
    id: string;
    title: string;
    done: boolean;
}

type State = {
    todos: Record<string, Todo>;
};

const useTodoStore = create<State>()(
    immer(() => ({
        todos: {
            "82471c5f-4207-4b1d-abcb-b98547e01a3e": {
                id: "82471c5f-4207-4b1d-abcb-b98547e01a3e",
                title: "Learn Zustand",
                done: false,
            },
            "354ee16c-bfdd-44d3-afa9-e93679bda367": {
                id: "354ee16c-bfdd-44d3-afa9-e93679bda367",
                title: "Learn Jotai",
                done: false,
            },
            "771c85c5-46ea-4a11-8fed-36cc2c7be344": {
                id: "771c85c5-46ea-4a11-8fed-36cc2c7be344",
                title: "Learn Valtio",
                done: false,
            },
            "363a4bac-083f-47f7-a0a2-aeeee153a99c": {
                id: "363a4bac-083f-47f7-a0a2-aeeee153a99c",
                title: "Learn Signals",
                done: false,
            },
        },
    }))
);

Thank you in advance!

[dbritto-dev]

@JKannekens did you install immer?

[JKannekens]

Yes I did, I made an example in code sandbox: Link to codesandbox

[dbritto-dev]

@JKannekens here you go -> https://codesandbox.io/p/sandbox/immer-zustand-forked-qhtm3k?file=%2Fsrc%2FApp.tsx%3A15%2C18 I bet in your case is inferring the type from the object itself but there's a workaround that you can use to deal with that

[JKannekens]

Oh wow, didn't think about that. Thanks for the fast response!

[naseer-medibank]

@JKannekens here you go -> https://codesandbox.io/p/sandbox/immer-zustand-forked-qhtm3k?file=%2Fsrc%2FApp.tsx%3A15%2C18 I bet in your case is inferring the type from the object itself but there's a workaround that you can use to deal with that

this link is not active. can I please get a active link, a bit curious about the answer

[jeremiahfallin]

Also looking for an example of this.

[dbritto-dev]

In a nutshell is this:

interface Todo {
    id: string;
    title: string;
    done: boolean;
}

type State = {
    todos: Record<string, Todo>;
};

const initialTodos: Record<string, Todo> = {
      "82471c5f-4207-4b1d-abcb-b98547e01a3e": {
          id: "82471c5f-4207-4b1d-abcb-b98547e01a3e",
          title: "Learn Zustand",
          done: false,
      },
      "354ee16c-bfdd-44d3-afa9-e93679bda367": {
          id: "354ee16c-bfdd-44d3-afa9-e93679bda367",
          title: "Learn Jotai",
          done: false,
      },
      "771c85c5-46ea-4a11-8fed-36cc2c7be344": {
          id: "771c85c5-46ea-4a11-8fed-36cc2c7be344",
          title: "Learn Valtio",
          done: false,
      },
      "363a4bac-083f-47f7-a0a2-aeeee153a99c": {
          id: "363a4bac-083f-47f7-a0a2-aeeee153a99c",
          title: "Learn Signals",
          done: false,
      },
  }

const useTodoStore = create<State>()(
    immer(() => ({ todos: initialTodos, }))
);