Simplified typing

[christianalfoni]

Dear Overminders!

I have one thing I really want to do and that is to clean up and simplify the typing of Overmind. It was a long process figuring out how to do it and with acquired knowledge through all this work and later projects I would like to do this:

import { IContext } from 'overmind'

const config = { ... }

export interface Context extends IContext<{
  state: typeof config.state,
  actions: typeof config.actions,
  effects: typeof config.effects
}> {}

There will be no more implicit typing, the above is what everybody will need to do. This is how you type the different things:

const myAction = (context: Context) => {}

const myActionWithPayload = (context: Context, payload: string) => {}

// Now we support generics
const myActionWithPayload = <T extends TEvent>(context: Context, payload: T) => {}

const myOperator = map((context: Context, value: string) => {})

const state: State = {
  someDerived: derived((state: State, rootState: Context["state"]) => {})
}

And I believe that is it. This will need to be a breaking change to actually clean up the internal typing of Overmind. I was just wondering how you feel about this change, do you consider refactoring your apps to this typing too much work? 😄

[christianalfoni]

As part of this change the operators are also extremely simplified, and best of all... you can just compose any action directly in as an operator.

const someAction = ({}: Context, value: string) => {}

const operator = pipe(
  someAction,
  wait(500)
)

It basically means operators finally are interoperable with plain actions. Which also means we do not need mutate, map and run anymore. You can just give it a plain action to do all those things. We rather have operators that goes beyond what a normal action can do. Like debounce, wait, fork, waitUntil etc.

This is such a huge improvement!

[suevalov]

Looks like a great improvement and it doesn't look like a lot of work to refactor our app.

[jmattheis]

Looks good, will there be errors if the signature of actions doesn't match (Context, Payload). f.ex. what would happen if an action similar to this is defined:

const myAction = (context: string) => {}

[christianalfoni]

@jmattheis Good question!

Yes, when the actions are attached to Overmind it expects the signature of: ´(context: IContext)` , so you will get the error where you instantiate Overmind rather than where you define the action 😄

[christianalfoni]

So a summary of what is being moved into next now is:

New typing, no more implicit typing:

import { IContext } from 'overmind'

const config = { ... }

export type Context = IContext<{
  state: typeof config.state,
  actions: typeof config.actions,
  effects: typeof config.effects
}>

Type actions:

const myAction = (context: Context) => {}

const myActionWithPayload = (context: Context, payload: string) => {}

Operator changes:

• Now an operator is interoperable with actions, meaning you can just do:

const whatever = pipe(
  (context: Context, input: string) => input.toUpperCase()
)

• Due to interoperable actions, the map, mutate and run operators has been removed. Just use plain action signature

• forEach operators has also been removed as the typing never worked there (This might come back, have to research some more)

• fork has new signature:

pipe(
  // "type" is a property on the object on the pipe
  fork('type', {
    FOO: (context: Context, event) => {
      event // Is now typed as FooEvent
    },
    BAR: (context: context, event) => {
      event // Is now typed as BarEvent
    } 
  })
)

• parallel now actually returns an array to the pipe with the results of each operator

React hooks

• useOvermind is removed in favour of explicit hooks (more efficient and cleaner)
• useState hook now has an added signature

const ItemComponent = ({ id }) => {
  // The state you access within the callback is not tracked,
  // only the result and further access is tracked. Meaning this
  // component will only track the item, not changes to "items"
  const item = useAppState(state => state.items[id])
}

[ssijak]

@christianalfoni can you give full example of the new typings feature with a simple state and action? because when I try it like this typescript complains:

import { IContext } from 'overmind'
import { createActionsHook, createStateHook } from 'overmind-react'

export type StateType = {
  value: string | null
}

export const state: StateType =  {
  value: null
} 

const changeState = ({ state }: Context, value: any) => {
  state.value = value
}

export const config = {
  state,
  actions: {
    changeState
  },
}

export type Context = IContext<{
  state: typeof config.state,
  actions: typeof config.actions,
  effects: typeof config.effects
}>

export const useAppState = createStateHook<Context>();
export const useActions = createActionsHook<Context>();

'config' implicitly has type 'any' because it does not have a type annotation and is referenced directly or indirectly in its own initializer.ts(7022)
'state' is referenced directly or indirectly in its own type annotation.ts(2502)
'changeState' implicitly has type 'any' because it does not have a type annotation and is referenced directly or indirectly in its own initializer.ts(7022)

[christianalfoni]

Hi @ssijak , when you write this in the same file you will get this error. If you rather do:

export type Context = IContext<{
  state: typeof state,
  actions: typeof actions,
  effects: typeof effects
}>

Then it works within the same file. typeof config.* only works across files. I guess this is some TypeScript bug, or just how it works. But typically you would not put it in the same file and there are no examples in the documentation. BUT! I totally see why you tried 😄

[ssijak]

Thanks for the quick answer! It works now, it does not complain. But I noticed some possible issues around actions. I am a relative typescript noob so maybe I'm talking nonsense but:

If I type action parameters as any like :

const changeState = ({ state }: Context, value: any) => {
  state.value = value
}

than c.changeState bellow is inferred to ()=>void type

export const useActions = createActionsHook<Context>();
const c = useActions()
c.changeState()

[christianalfoni]

Thanks for testing! Doing any will also match void I guess, which is how actions identify "no payload". I would strongly argue that any should not be used as a typed payload, but it is confusing for sure 😄

any is typically used for unknown objects. Cause if it was like a string, number etc. you would actually type it. So doing {} instead will probably fix it, as it matches any object, but not void

But this is good for documentation for sure!

[ssijak]

Thanks. I encountered one more possible issue. I do not find OnInitialize exported from overmind in the next tag. Is it removed or?

edit: So I should just use onInitializeOvermind action?

[Michielnuyts]

@christianalfoni This is all coming in V28 right? Do you have a rough release date in mind?

[christianalfoni]

There has been a little bit lack of time lately (Blame the baby mostly 😉 ), but also at codesandbox.io we are hiring a few people and it has also taken up a lot of my time.

But if you look at the issue list now I have marked some issues as NEXT RELEASE, those needs to be fixed. Good thing is that our codesandbox.io PR, codesandbox/codesandbox-client#5517, is now running green and should be merged shortly. Which was also a blocker for the next release.

So yeah, I hope to get some time soon to get through the pending issue and get that release out 😄