Rematch.js v2 released

Sergio M — Mon, 01 Feb 2021 14:12:49 +0000

Rematch has been created a few years ago by Shawn McKay and Blair Bodnar, a pair of canadian programmers. It's a tiny but super powerful wrapper around Redux that reduces tons of boilerplate that Redux needs to operate.

For example, async actions in Redux needs redux-thunk or redux-saga, in Rematch are just native async/await methods, with zero dependencies.

Rematch has been downloaded 2 millions times in 2 years and used by big companies like Adobe or Alibaba in production environments with any issues at all.

Example of a Rematch Model

In this example we're using typescript, initializing a empty state players which will contain an array of players that will come from an external API.

type PlayersState = {
    players: PlayerModel[]
}

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

In a few lines you can get easily asynchronous calls to an external API and data stored globally. It's amazing, with Redux you will needs tons of boilerplate, libraries and extra configuration.

I'm glad to write here that Rematch has received a full rework of his codebase that improved even more the library.

What we did in 6 months of iteration plan:

We migrated all our codebase to Typescript. (Also this means that we're 100% percent compatible with latest Typescript features and we get intellisense of states, effects, reducers) everything is typed and helps a lot to avoid regressions)
Introduced a new Plugin API for making it easier creating custom plugins for Rematch.
We moved to a monorepo with yarn workspaces and lerna.
Reduced bundle size of EVERY package that Rematch owns.

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%

Also, we migrated our documentation to Docusaurus v2 and bought a domain for Rematch!

https://rematchjs.org

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

Feel free to try Rematch on your new projects or take a look at any of our examples.

Happy new year everyone!!

Forem: Sergio M

Rematch.js v2 released

Example of a Rematch Model

What we did in 6 months of iteration plan: