Middleware in TypeScript about zustand HOT 9 CLOSED

I have found this middleware type useful

type Middleware<S> = (
  config: StateCreator<S>,
) => (set: SetState<S>, get: GetState<S>, api: StoreApi<S>) => S;

const log: Middleware<StoreType> = config => (set, get, api) =>
  config(args => {
    console.log("  applying", args)
    set(args)
    console.log("  new state", get())
}, get, api);

from zustand.

Ah sorry, I misunderstood you. The types are exported so you can use them:

import create, { StateCreator, SetState, GetState, StoreApi } from 'zustand'

interface YourState {
  a: number,
  b: string
}

const log = (config: StateCreator<YourState>) => (
  set: SetState<YourState>,
  get: GetState<YourState>,
  api: StoreApi<YourState>
) => config(args => {
  console.log("  applying", args)
  set(args)
  console.log("  new state", get())
}, get, api)

from zustand.

@JeremyRH I agree that plain JS is very accessible to everybody. However, when writing middleware, I'm not sure how to properly type things. Therefore, I'd love an example here, even if it's not gonna make it to the doc itself.

For example:

const log = config => (set, get, api) => config(args => {
  console.log("  applying", args)
  set(args)
  console.log("  new state", get())
}, get, api)

What are config, set, get, api types? Not that it's breaking anything, but I'd love to properly type my middleware.

Thanks!

from zustand.

I have found this middleware type useful

type Middleware<S> = (
  config: StateCreator<S>,
) => (set: SetState<S>, get: GetState<S>, api: StoreApi<S>) => S;

const log: Middleware<StoreType> = config => (set, get, api) =>
  config(args => {
    console.log("  applying", args)
    set(args)
    console.log("  new state", get())
}, get, api);

Sorry, what is StoreType?

from zustand.

I like that the examples are plain JS, it makes them more accessible. I also don't want to add too much noise to the readme. Maybe next to some examples we can provide a link to a typescript version using the typescript playground.

from zustand.

Thank you! This is really helpful.

from zustand.

@JeremyRH
hey !
how to write types when use it with immer ?

I defined types like:

interface IState {
  currentGroup: object | null;
  GroupIndex: number;
  palying: boolean;
}

const myStore = (set: SetState<IState>) => ({
  currentGroup: null,
  GroupIndex: 0,
  playing: false,

  setCurrentGroup: (group: object) =>
    set((state) => {
      state.currentGroup = group;
    })
});

const immer = (config: StateCreator<IState>) => (
  set: SetState<IState>,
  get: GetState<IState>,
  api: StoreApi<IState>
) => config((fn) => set(produce(fn)), get, api);

export const useStore = immer(myStore);

sandbox: https://codesandbox.io/s/pedantic-flower-immerzustand-rh070?file=/src/App.tsx:196-713

from zustand.

@kurosh-z Hey, I fixed it recently. Please check the example in #169. If it doesn't work, would you please file a new issue?

from zustand.

Thank you @coffee-cup! I had to use: type Middleware<S extends State> to make it work

I have found this middleware type useful

type Middleware<S extends State> = (
  config: StateCreator<S>,
) => (set: SetState<S>, get: GetState<S>, api: StoreApi<S>) => S;

const log: Middleware<StoreType> = config => (set, get, api) =>
  config(args => {
    console.log("  applying", args)
    set(args)
    console.log("  new state", get())
}, get, api);

from zustand.