2 posts tagged with "rematchjs"

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' })],
})
Copy

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

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' })],
})
Copy

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

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()],
})
Copy

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

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)
		},
	}),
})
Copy

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)
		},
	}),
})
Copy

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

bash
npm install @rematch/core --save
Copy

bash
npm install @rematch/core --save
Copy

Social​

Feel free to 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.

I'm super happy to announce that the new website is the continuation of the work that all of us who collaborate in Rematch have done altruistically because we love it.

Today we're announcing version 2.0.0 of Rematch. Almost 6 months passed since we opened the Roadmap V2 for Rematch. 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​

• We're 100% compatible with TypeScript, YES!! Using createModel() helper we get autocomplete of effects, reducers, also the state, also we accept if the state is complex (like custom types) with a simple as. This is thanks to much people but Zhi Tian worked hard here with d.ts files, he's the type sorcerer.

And no more bug fixes... because there aren't any. Rematch is consolidated as a stable alternative to Redux and other state-management solutions, it's fast, light, easy, and maintanaible. What else do we need?

New features​

• We introduced a new method of directories, MONOREPO. Yes, we are using lerna to handle all the packages deployment and common dependencies.
• We used tsdx for building our packages to UMD,CJS, and ES. That means we're compatible with all the formats that exists nowadays.
• Now we collect all the errors you have on your configuration - (there's any?). And we throw all of them not just the first one. This avoids doing computation in production build, so we got some speed improvements.
• Added new hooks for custom plugins: onReducer, and onRootReducer. Super useful if you pretend to migrate some native redux plugin to Rematch.

Chore​

• We refactored the documentation to Docusaurus, now it contains a blog ;), also we have warnings if some link is broken, and a super cool landing page.
• We worked hard to reduce bundle size a lot but still being compatible with Internet Explorer 11 is a must for us the results are incredible:

package	old version	latest version	diff
@rematch/core			-106.12%
@rematch/loading			-76.36%
@rematch/updated			-87.18%
@rematch/select			-24.24%
@rematch/persist			-44.33%
@rematch/immer			-189.75%

As you can see, holy moly, we reduced the size drastically.

• Also we migrated from Travis.ci to Github Actions, and we're really happy with the change because we have three workflows:
  • Size Testing: we avoid regressions of size on each pull-request.
  • Pull Request title: we're using semantic-release to generate cool changelogs, we ensure that the title follows the angular convention.
  • Rematch CI: of course the main workflow that runs all the testing suite (also we test typescript types to avoid regressions).

In 2021 Redux isn't that cool as React.useContext, React.useReducer, or other alternatives of state-management like jotai, but we keep working hard inside Rematch to keep the essence of simplicity and still be in conjuntion with Redux to provide an easy and a powerful state-management solution to every project.

Happy new year to everyone!