On effects, this.reducer() is not correctly infered

[semoal]

Describe the bug

With Rematch you can use this inside effects to dispatch data to reducers.

Basically this:

export const players = createModel<RootModel>()({
	state: {
		players: [],
	},
	reducers: {
		SET_PLAYERS: (state, players) => {
			return {
				...state,
				players,
			}
		},
	},
	effects: () => ({
    async getPlayers() {
      const response = await fetch(
        'https://www.balldontlie.io/api/v1/players'
      )
      const { data } = await response.json()
      this.SET_PLAYERS(data)
    }
  })
})

is equivalent to this:

export const players = createModel<RootModel>()({
	state: {
		players: [],
	},
	reducers: {
		SET_PLAYERS: (state, players) => {
			return {
				...state,
				players,
			}
		},
	},
	effects: (dispatch) => ({
    async getPlayers() {
      const response = await fetch(
        'https://www.balldontlie.io/api/v1/players'
      )
      const { data } = await response.json()
      dispatch.players.SET_PLAYERS(data)
    }
  })
})

To Reproduce

When using Typescript, this.SET_PLAYERS() won't get autocompleted because this isn't overriden by Rematch.

Current work around

      (this as typeof players).SET_PLAYERS(data)

Expected behavior

Should autocomplete reducers and effects of the current Model.

Additional context

• Version: 2.0.1

[maciekgrzybek]

I'm happy to take a look at this :)

[maciekgrzybek]

It's really tough to figure it out really... Do you have any ideas what might be causing that?

[semoal]

Actually this type:

export type ModelEffect<
	TModels extends Models<TModels> = Record<string, any>
> = (
	payload: Action['payload'],
	rootState: RematchRootState<TModels>,
	meta: Action['meta']
) => any

Is the current type for an effect, you will see that if you add the this property with anything else, you get autocomplete of the rootstate:

export type ModelEffect<
	TModels extends Models<TModels> = Record<string, any>
> = (
    this: RematchRootState<TModels>
	payload: Action['payload'],
	rootState: RematchRootState<TModels>,
	meta: Action['meta']
) => any

We must add something like: ExtractReducers&Effects<TModel> where we can pass a Model and extract his effects and reducers.

It is not an easy fix, @tianzhich it's an expert with types and made something impossible to practically any library out there, is that being practically 100% compatible with the current Redux and React Redux typings.

[maciekgrzybek]

Awesome, thanks for explanation, I'll give it another go :)

[maciekgrzybek]

I have another question :) I'm not sure if I'm using the correct local examples to actually confirm my changes in the core? is it just the examples folder? Is it linked automatically to the local rematch? Unfortunately CONTRIBUTING.md file is not really specific about it :(

[semoal]

Yes the examples folder is linked via the monorepo.
You only need to re-run the build on the package you change.

yarn build --scope @rematch/core

In the root of the project and will rebuild in less than 5 seconds the package =)

[semoal]

We're using tsdx internally for the packages, so probably you could use also tsdx watch inside the core package (not sure about this)
Tomorrow I'll improve the CONTRIBUTION.md =)

[maciekgrzybek]

Wow, that was a quick response :D Thanks a lot :)

[tianzhich]

Hi mate, how about the progress of this? @maciekgrzybek I can continue from your work if you did some modifications.

[maciekgrzybek]

Hey @tianzhich I totally dropped the ball on this one, I had few approaches but couldn't figure it out at all :(

[tianzhich]

I created a minimal rematch typing system and tried to fix this but failed. Maybe someone can pick this one and continue from here.

[semoal]

Close this, since will be fixed with 2.1.0 release

[ardyfeb]

Did this issue fixed ? i'm still not getting correct typing on this inside effects function

[semoal]

It is partially, we couldn’t fix a 100% type checking it shouldn’t return error at least. Contributions are appreciated ;)