Skip to main content

Typed State

Rematch plugin for type-checking state at runtime. Uses prop-types for describing expected type shape.

Install#

bash
npm install @rematch/typed-state
bash
npm install @rematch/typed-state

If your project doesn't have prop-types package yet, you need to add it as well:

bash
npm install prop-types
bash
npm install prop-types

Compatibility#

Install the correct version of the typed-state plugin based on the version of the core Rematch library in your project.

@rematch/core@rematch/typed-state
1.x.x0.1.x
2.x.x2.x.x

typedStatePlugin([config])#

The updated plugin accepts one optional argument - config, which is an object with the following properties:

  • strict (boolean): if strict is true, we'll log a warn if some models don't contain typings property. Default value is false.

  • logSeverity (trace | debug | info | warn | error | fatal): Default value is warn, just console[logSeverity](message), if we want to throw an error you can use fatal.

tip
  • If we add logSeverity undefined but strict is true, automatically will fill logSeverity to warn
info
  • The main difference about strict true/false is allowing other models to not be typed.
  • This messages are ONLY displayed on a process.env.NODE_ENV !== 'production'

Usage#

Use typings property to describe the shape of model's state, and add typed-state plugin when initializing a store:

js
import T from 'prop-types'
import { init } from '@rematch/core'
import typedStatePlugin from '@rematch/typed-state'
const user = {
state: {
name: 'Jon',
age: 25,
isDeveloper: true,
address: {
country: 'US',
city: 'New York',
},
},
typings: {
name: T.string.isRequired,
age: T.number.isRequired,
isDeveloper: T.bool,
address: T.shape({
country: T.string.isRequired,
city: T.string,
}),
},
reducers: {
updateName: (state, name) => ({
name,
}),
},
}
const store = init({
models: { user },
plugins: [typedStatePlugin()],
})
js
import T from 'prop-types'
import { init } from '@rematch/core'
import typedStatePlugin from '@rematch/typed-state'
const user = {
state: {
name: 'Jon',
age: 25,
isDeveloper: true,
address: {
country: 'US',
city: 'New York',
},
},
typings: {
name: T.string.isRequired,
age: T.number.isRequired,
isDeveloper: T.bool,
address: T.shape({
country: T.string.isRequired,
city: T.string,
}),
},
reducers: {
updateName: (state, name) => ({
name,
}),
},
}
const store = init({
models: { user },
plugins: [typedStatePlugin()],
})

With that in place, if you try to update the state with invalid value type, you'll get a warning in developer tools:

js
store.dispatch.user.updateName(undefined)
// > console.warn
// > [rematch] Invalid property `name` of type `undefined` supplied to `user`, expected `string`.
js
store.dispatch.user.updateName(undefined)
// > console.warn
// > [rematch] Invalid property `name` of type `undefined` supplied to `user`, expected `string`.

Please refer to prop-types documentation for a full list of available validations.