State does not properly update components with multilevel object state

[ghost]

• Having deep objects causes state to not update properly sometimes being null in the components.
• After reading the documentation I noticed there is a line about using immerjs for setState. How does one replace the built in setState with immerjs?

[albertogasparin]

Thanks for reporting the issue. Would you mind reproducing the bug in codesandbox.io, so it is much easier for us to understand what is happening?

On replacing the default setState implementation with immer, that could be done by overriding the default mutator:

// somewhere in your top/config import
import { defaults } from 'react-sweet-state'
import { produce } from 'immer';

defaults.mutator = (...args) => produce(...args);

The you call setState with a function instead of passing an object:

const actions = {
  increment: () => ({ setState }) => {
    setState(draft => {
      draft.count += 1;
    });
  },
};

[ghost]

So the issue happened when using setState and only returning a partial state. This was fixed when using immerjs to return the entire state. However I was unable to use your suggested mutator because the TypeScript check fails. I was able to do:

const actions = {
  increment: () => ({ getState, setState }) => {
    const newState = produce(getState(), draft => {
      draft.count += 1;
    });
    setState(newState);
  },
};

[albertogasparin]

Yeah, not sure how you can make TS happy as the signature of setState is different.
Wonder if you can override the type SetState of the library, as by doing so TS should pick up the different setState implementation

[ghost]

The typing issue seems to lie in index.d.ts with:

const defaults: {
  devtools: boolean;
  middlewares: any;
  mutator: <TState>(
    prevState: TState,
    partialState: Partial<TState> // I believe this second argument could be more flexible, but haven't been able to get the typing right yet
  ) => TState;
};

I tried with no luck:

partialState: Partial<TState> | (<TState>(draftState: TState) => TState)

[albertogasparin]

I think I've found a solution to properly allow custom mutator types to be correct. Would you mind checking #53, try following the docs that I added and see if that works?