Call actions within actions, in a typesafe way?

[isaachinman]

I've been using zustand very happily for over a year now, but have frequently run into the problem which I will now describe.

It's a very common pattern in my usage to need to call an action from within another action. As a TypeScript user, the main issue is that the (very well-written) typings from combine don't really permit this type of usage out of the box.

Here is an example. It's contrived, but demonstrates the issue:

import axios from 'axios'
import create, { GetState, SetState } from 'zustand'
import { combine } from 'zustand/middleware'

export type UserStore = {
  data: null | {
    classes?: string[]
    students?: string[]
    userType: 'teacher' | 'student'
  }
}

export const userStoreInitialState = (): UserStore => ({
  data: null,
})

const userStoreActions = (
  set: SetState<UserStore>,
  get: GetState<UserStore>,
) => ({
  fetchClasses: async () => {
    set({
      data: {
        classes: (await axios('/my-backend/user-type')).data,
        userType: 'student',
      },
    })
  },
  fetchStudents: async () => {
    set({
      data: {
        students: (await axios('/my-backend/user-type')).data,
        userType: 'teacher',
      },
    })
  },
  fetchUserType: async () => {
    set({
      data: {
        userType: (await axios('/my-backend/user-type')).data,
      },
    })
  },
  initialize: async () => {
    const {
      fetchUserType,
      fetchClasses,
      fetchStudents,
    } =
      // TODO: Solve problem of calling actions within actions in a typesafe way
      get() as any

    await fetchUserType()

    const userType = get().data?.userType

    if (userType === 'teacher') {
      fetchStudents()
    } else if (userType === 'student') {
      fetchClasses()
    }
  },
})

export const useUserStore = create(
  combine(
    userStoreInitialState(),
    userStoreActions,
  ),
)

So, we want to be able to call other actions, like fetchStudents, within an initialise action, but obviously we'd like to be able to call fetchStudents in isolation, as a standalone action, at other points in the application flow.

I'd be very grateful if anyone has any non-hacky suggestions as to how to make this work in a typesafe way. Thanks!

[dai-shi]

Yeah, combine can't do that now. I thought it's impossible, but let's welcome @devanshj here and hear their idea.

[devanshj]

One obvious way is to write types for actions too: https://tsplay.dev/N9pdjw This has only one assertion at the end in combine but other than it's fully type-safe. For example if you forget to implement an action or some property for the initial data it won't compile.

But I think what you want to achieve is infer the actions types. This is not possible because of the recursive nature

// https://tsplay.dev/w6X0Gm

declare const createActions: <T>(f: (get: () => T) => T) => T

createActions(get => ({
  foo: () => {},
  bar: () => {
    get().foo()
  }
}))

There's no way to make the above code compile without type annotations.

[frontshift]

I only started out yesterday with Zustand, so forgive me if this is not good practice. I would like to use Immer and also plan to always declare my actions outside of the store so that all my actions actions

• don't have to be accessed via the store as in const increasePopulation = useStore(state => state.increasePopulation)
• Don't have to be added to the store interface
• Can easily be called from anywhere within my app without using useStore.getState().myAction (I don't have to reference my store anywhere except in the actions file)

I created a base store which only has a set() function, which basically just acts as a proxy for Immer's produce() method.

// TODO: Using NamedSet her as the 3rd parameter "name" is not defined on SetState
export const makeImmutableSetter =
  <Store extends object>(set: NamedSet<Store>): Setter<Store> =>
  (fn, name?: string) =>
    set(produce(fn), false, name);

I then created a utility function which merges the base store with the actual store that I want to create (one with devtools and one without)

export const getBaseStore = <T extends object>(set: SetState<T>): BaseStore<T> => ({
  set: makeImmutableSetter(set),
});

export const createVanillaStoreWithDevtoolsFromBase = <T extends object>(
  getStore: (set: SetState<T & BaseStore<T>>, get?: GetState<T & BaseStore<T>>) => T,
  name: string
) =>
  createVanillaStore<T & BaseStore<T>>(
    devtools(
      (set: SetState<T & BaseStore<T>>, get?: GetState<T & BaseStore<T>>) => ({
        ...getBaseStore(set),
        ...getStore(set, get),
      }),
      { anonymousActionType: name }
    )
  );

and this is what my store looks like:

import createHookFromStore from 'zustand';
import { makeActionType, createVanillaStoreWithDevtoolsFromBase } from '@stores/utils';

export const actionType = makeActionType('appStore');

export interface AppStore {
  shouldShowPreloader: boolean;
}

export const appStore = createVanillaStoreWithDevtoolsFromBase<AppStore>(
  (set, get) => ({
    shouldShowPreloader: false,
  }),
  'appStore'
);

export const useAppStore = createHookFromStore<AppStore>(appStore);

I then have a separate actions file for all my actions where I use the custom `set() function of the base store (using Immer) to set the state.

import { actionType, appStore, AppStore } from './app.store';

export const setImmutableState = appStore.getState().set;

export const showPreloader = () => {
  setImmutableState((state) => {
    state.shouldShowPreloader = true
  }, actionType('showPreloader'));
};

export const hidePreloader = () => {
  setImmutableState((state) => {
    state.shouldShowPreloader = false
  }, actionType('hidePreloader'));
}; 


export const fetchStuff = async () => {
  showPreloader()
  const response = await fetchStuff()

  hidePreloader()
  doOtherStuff()

  if (response.data) {
    setImmutableState((state) => {
      state.stuff = response.data;
    }, actionType('fetchStuff'));
  }
}

It seems to be working ok from my limited experience and everything is nicely decoupled and I can call actions from within actions. But perhaps there are better solutions?

[ddanielgal]

I made a very minimal example with the basic idea of defining a setter in the store and accessing it with getState. Here is a codesandbox link. This is for zustand v4.

Does anybody see any potential bugs or pitfalls with this solution?

// store.ts
import { Draft } from "immer";
import create from "zustand";
import { immer } from "zustand/middleware/immer";

type State = {
  count: number;
};

type Setter = {
  set: (setter: (state: Draft<State>) => void) => void;
};

const initialState: State = { count: 0 };

const useCounter = create<State & Setter>()(
  immer((set) => ({ ...initialState, set: (state) => set(state) }))
);

export default useCounter;

// actions.ts
import useCounter from "./store";

const set = useCounter.getState().set;

export function increment() {
  set((state) => {
    state.count = state.count + 1;
  });
}

export function decrement() {
  set((state) => {
    state.count = state.count - 1;
  });
}

[dai-shi]

If typescript doesn't complain, it should be good.

If I were to do that, I would a) use .setState, and b) use produce directly:

// store.ts
import create from "zustand";

type State = {
  count: number;
};

const initialState: State = { count: 0 };

const useCounter = create(() => initialState);

export default useCounter;

// actions.ts
import produce from "immer";
import useCounter from "./store";

export function increment() {
  useCounter.setState(produce((state) => {
    state.count = state.count + 1;
  }));
}

export function decrement() {
  useCounter.setState(produce((state) => {
    state.count = state.count - 1;
  }));
}

See also: https://github.com/pmndrs/zustand/blob/d27ea948843b2c955ce2be530e5e963dff8958de/docs/guides/practice-with-no-store-actions.md

[KamalakannanKrishnaraj15]

Hi,
I am a new user of Zustand and am attracted with the implementation. The above solution looks nice with less boilerplate compared to redux code setup.
I need a reference for having multiple stores for better readability and maintainability approach. With logger middleware added when creating the store.

@dai-shi can you help me here?

[dai-shi]

I hope someone can help. You want to open a new discussion.

[KamalakannanKrishnaraj15]

Yes

[tokland]

A class can be used:

import { create, StoreApi } from "zustand";
import { combine } from "zustand/middleware";

type Api = StoreApi<CounterState>;

type CounterState = { value: number };

class CounterActions {
    constructor(private set: Api["setState"], private get: Api["getState"]) {}

    add = (n: number) => this.set(state => ({ value: state.value + n }));
    increment = () => this.add(+1);
    decrement = () => this.add(-1);
}

const initialState: CounterState = { value: 0 };

export const useCounterStore = create(combine(initialState, (set, get) => new CounterActions(set, get)));

// Usage

const value = useCounterStore(s => s.value);
const increment = useCounterStore(s => s.increment);

[devanshj]

@tokland Oooo that's very clever. Classes can be used to create circular type dependencies. In fact now you don't even need combine.

import create, { StoreApi as Store, Mutate } from "zustand"

class MyStore {
  counter = 0

  private add = (x: number) => {
    this.set(s => ({ counter: s.counter + x }))
  }

  increment = () => {
    // here `this` has all the actions typed (and state too ofc), exactly what the OP wanted.
    this.add(+1)
  }

  decrement = () => {
    this.add(-1)
  }


  constructor(
    private set: Store<MyStore>["setState"],
    private get: Store<MyStore>["getState"],
    private store: Mutate<Store<MyStore>, [/* add middleware mutators here */]>
  ) {}
}

let useMyStore = create<MyStore>()((set, get, store) => new MyStore(set, get, store))

To elaborate on "Classes can be used to create circular type dependencies"... What I mean is you can't do this...

import { StoreApi as Store } from "zustand";

const createMyStore = (set: Store<ReturnType<typeof createMyStore>>["setState"]) => {
  let counter = 0
  let add = (x: number) => set(s => ({ counter: s.counter + x }))
  let increment = () => add(1)
  let decrement = () => add(-1)

  return { counter, increment, decrement }
}

// Compilation error
// 'createMyStore' implicitly has type 'any' because it does not have a type annotation and is referenced 
//  directly or indirectly in its own initializer.

That is to say you can't type the parameter of a function using what it returns, but if you make that function a class, then you can do it!

import { StoreApi as Store } from "zustand";

class MyStore {
  constructor(private set: Store<MyStore>["setState"]) {}
  
  counter = 0
  private add = (x: number) => this.set(s => ({ counter: s.counter + x }))
  increment = () => this.add(1)
  decrement = () => this.add(-1)
}

[dai-shi]

Interesting..

[PiTiLeZarD]

So essentially, a lot of legwork for something that should just work?

// @ts-expect-error this obviously works
get().setBookmarks( ... ),

get() return type is StoreProps even if it returns StoreProps & StoreActions (the code works using this). Sounds like this should be fixed or I'm not understanding something fundamental (it happens very often it seems lol)

I'm creating the store like this:

import { create } from "zustand";
import { combine, devtools } from "zustand/middleware";

export type StoreProps = {
    /** here typedef of your variables */
};

export type StoreActionsProps = {
    /** here typedef of your actions */
};

export const InitialState: StoreProps = {
    /** here the default values for these variables */
};

const store = combine(InitialState, (set, get): StoreActionsProps => ({
    /** Implement your actions here */
}));

export const useStore = create(devtools(store));

Trying to let typescript do the maximum type inference as I couldn't figure out how to type set and get appropriately, but get is definitely typed wrong from within IMO

SideNote:

type GetFn = () => StoreProps & StoreActionsProps;

...

(get as GetFn)().setBookmarks( ... )

works but you know... not ideal!

[dbritto-dev]

@PiTiLeZarD would you mind sharing us a minimal repro on stackblitz? as far I see seems you are typing wrong your store

[dai-shi]

@PiTiLeZarD
combine is designed to limit the usage, so its type doesn't assume calling actions from actions.
So, your type assertion should be a good workaround.
Lately, I'm working on a different pattern for more flexibility with opinions. https://github.com/zustandjs/zustand-slices