gauravkumar37 commented 4 years ago

I would like to add a TypeScript example which combines combine and immer usages so that everything is typed, automatically inferred and is intended for use with immer. Typing is inferred in state actions as well as when using it in the components.

Here, withImmer should be the innermost middleware and other middlewares can be added on top of it such as devools.
The 2nd parameter of set function (replace) is omitted here, since it doesn't make sense with Immer because the entire object (original/proxied) is returned.
It should be noted that using shallow in useStore(..., shallow) is also not needed because if the object is not modified, Immer returns the original object and strict equality === will hold.
In the current version of immer example, explicit type casting is used because currying is used for the producer syntax. I have explicitly used the original form of producer with 2 arguments so that no casting is required.

const withImmer = <PrimaryState extends State, SecondaryState extends State>(
  initialState: PrimaryState,
  createState: (
    set: (fn: (draftState: PrimaryState) => void) => void,
    get: GetState<PrimaryState>,
    api: StoreApi<PrimaryState>
  ) => SecondaryState
): StateCreator<PrimaryState & SecondaryState> =>
  (set, get, api) =>
    Object.assign(
      {},
      initialState,
      createState(
        fn => set(baseState => produce(baseState, fn)),
        get as GetState<PrimaryState>,
        api as StoreApi<PrimaryState>
      )
    );

Usage:

const initialState = {data: {count: 0, other: true}};
const useStore = create(withImmer(initialState, set => ({
    incBy: (by: number) => set(state => {
      state.data.count += by;
    }),
    invertOther: () => set(state => {
      state.data.other = !state.data.other;
    }),
  }))
);

const [count, incBy, invertOther] = useStore(state => [state.data.count, state.incBy, state.invertOther]);
console.log(count); // 0
incBy(10);
console.log(count); // 10

Please let me know your thoughts on the same.

dai-shi commented 4 years ago

Nice!

If we add CustomSetState in combine, can we create withImmer with combine?

gauravkumar37 commented 4 years ago

If we add CustomSetState in combine, we would still have to actually call produce function in combine in https://github.com/react-spring/zustand/blob/7b2391b74ab19730d10f2709bb91528b838045f8/src/middleware.ts#L111 Is there a way in TS which can help us do that?

dai-shi commented 4 years ago

Yeah, I mean my question is if we can create withImmer having combine in it.

dai-shi commented 4 years ago

@gauravkumar37 I finally made it. It was not combine but StateCreator that we need to modify. Check this: https://codesandbox.io/s/beautiful-wilbur-ftvdt

type StateCreator<
  T extends State,
  CustomSetState = SetState<T>,
  U extends State = T
> = (set: CustomSetState, get: GetState<T>, api: StoreApi<T>) => U;

const immer = <T extends State, U extends State>(
  config: StateCreator<T, (fn: (draft: T) => void) => void, U>
): StateCreator<T, SetState<T>, U> => (set, get, api) =>
  config((fn) => set(produce(fn) as (state: T) => T), get, api);

const combineAndImmer = <
  PrimaryState extends State,
  SecondaryState extends State
>(
  initialState: PrimaryState,
  config: StateCreator<
    PrimaryState,
    (fn: (draft: PrimaryState) => void) => void,
    SecondaryState
  >
): StateCreator<PrimaryState & SecondaryState> => {
  return combine(initialState, immer(config));
};

I have explicitly used the original form of producer with 2 arguments so that no casting is required.

This doesn't seem to work in the codesandbox above. Not sure.