Skip to main content

One post tagged with "release"

View All Tags

· 5 min read
Sergio Moreno

Today we're announcing version 2.1.0 of Rematch. More or less 4 months passed since we opened the Roadmap for version 2.1.0. Here we are writing this post telling you guys all the incredible improvements and features we introduced to this new version of Rematch.

Bug fixes​

  • Typescript 4.3.X typings was causing some issues with connect() method and Rematch. #893
  • When the payload of an effect or reducer was explicitly adding a default value in case of null, wasn't getting inferred. #894
  • When using this object accessor inside effects property, wasn't autocompleted. Since getting autocomplete was like a super-man task we ended up at least not throwing an error of any. Now returns an Action<any, any> #870
  • init() function now accepts Rematch models like Partial<RootModel>, this can be used in conjuntion with store function store.addModel() for dynamically adding models. #892
  • Loading plugin returns the chain of promises, that means if an effect crashes you can catch that error. #907
  • Upgrading TypeScript from 4.1.2 version to 4.3.X caused some unexpected never types. #912
  • Immer peer dependency of @rematch/immer plugin updated to > 9, we keep our official plugins updated.

New features​

  • We officially released @rematch/typed-state plugin, was an official plugin for Rematch v1, but we didn't back ported it to v2 since now. It's just 258 bytes, and recommended to anyone who wants to encourage a good shape of state on any JavaScript codebase. You can read more about this plugin in the official documentation.
  • @rematch/loading now has been refactored to accept more options than boolean or number, now you can pass `

Store as full object

Passing full to config will create a shape where if any effect promise crashes, will save the error object inside error, if the promise resolves correctly will set success to true, and if it keeps loading, will keep the loading property to true. It's quite similar to React-Query library, and really powerful for building interactive libraries without writing tons of reducers for our effects.

ts
type FullModel = ExtraModelsFromLoading<RootModel, { type: 'full' }>
export const store = init<RootModel, FullModel>({
	models,
	plugins: [loadingPlugin({ type: 'full' })],
})
ts
type FullModel = ExtraModelsFromLoading<RootModel, { type: 'full' }>
export const store = init<RootModel, FullModel>({
	models,
	plugins: [loadingPlugin({ type: 'full' })],
})

Store as numbers

Will work as usual, when a effect is loading will increment the number of the state.

ts
type FullModel = ExtraModelsFromLoading<RootModel, { type: 'number' }>
export const store = init<RootModel, FullModel>({
	models,
	plugins: [loadingPlugin({ type: 'number' })],
})
ts
type FullModel = ExtraModelsFromLoading<RootModel, { type: 'number' }>
export const store = init<RootModel, FullModel>({
	models,
	plugins: [loadingPlugin({ type: 'number' })],
})

Store as booleans

true or false given the effect promise if it's resolved or not.

ts
type FullModel = ExtraModelsFromLoading<RootModel>
export const store = init<RootModel, FullModel>({
	models,
	plugins: [loadingPlugin()],
})
ts
type FullModel = ExtraModelsFromLoading<RootModel>
export const store = init<RootModel, FullModel>({
	models,
	plugins: [loadingPlugin()],
})

You can see the pull request implementation here and read more about this on the official documentation here.

Chore​

  • Now we test every night our entire CI setup with latest and next TypeScript versions, which means a bunch of tests integration, unit and even end-to-end in a real world React application written with TypeScript with all our plugins is tested before TypeScript releases a new version.
    info

    This will avoid issues with future versions of Rematch + TypeScript since we're testing before TypeScript officially releases the version is causing issues, giving us time to fix the issue on Rematch side.

  • Now we added shiki-twoslash to Rematch documentation, now you can see the powerful of Rematch with TypeScript directly in the browser, not needed to download any project, just check the typings as you would do on your favorite code editor.

For instance, check this count model:

ts
import { createModel } from '@rematch/core'
import type { RootModel } from './models'
 
export const count = createModel<RootModel>()({
	state: 0,
	reducers: {
		increment(state, payload: number) {
			return state + payload
		},
	},
	effects: (dispatch) => ({
		incrementAsync(payload: number, state) {
			dispatch.count.increment(payload)
		},
	}),
})
ts
import { createModel } from '@rematch/core'
import type { RootModel } from './models'
 
export const count = createModel<RootModel>()({
	state: 0,
	reducers: {
		increment(state, payload: number) {
			return state + payload
		},
	},
	effects: (dispatch) => ({
		incrementAsync(payload: number, state) {
			dispatch.count.increment(payload)
		},
	}),
})

Hope you enjoy this new release, feel free install it as usual with your favorite package manager.

bash
npm install @rematch/core --save
bash
npm install @rematch/core --save

Social​

Feel free to Twitter URL official Twitter to get live updates of Rematch new releases or any news related to Rematch.

Also, you can join our Discord community to live-guidance or assistance with your Rematch projects. Chat on Discord