Skip to content

tomasz-zablocki/redux-orm-ex-types-react-example

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Redux-ORM typescript example: create-react-app + experimental types

Integrating experimental redux-orm typings with create-react-app@^3.0.0

How-to

  • npm install
  • npm start

Notes

warning: these types are a WIP - likely to change in future

Installing

Substitute @types/redux-orm dependency with experimental redux-orm types branch:

{ //... "dependencies": { //...  "@types/redux-orm": "github:tomasz-zablocki/redux-orm-typings#experimental" } }

Redux-ORM schema definition

Do not declare instance properties inside class definitions - babel transpiles them into additional prototype properties which interfere with redux-orm descriptors.

Declaration merging

  1. each Model is defined by a class and an interface with matching identifiers
  2. define an interface describing the shape of Model's instances:
    interface SourceModel { id: number name: string target: TargetModel } interface TargetModel { id: number sources: QuerySet<SourceModel> }
  3. define related Model class extending Model providing additional type parameter.
    Set the parameter to typeof (TheModelBeingDefined)
    class SourceModel extends Model<typeof SourceModel> { static modelName = 'SourceModel' as const static fields = { id: attr(), name: attr(), target: fk('TargetModel', 'sources') } } class TargetModel extends Model<typeof TargetModel> { static modelName = 'TargetModel' as const static fields = { id: attr() } }

Mapping Model.fields to Model interfaces

Assuming two related Model classes: SourceModel and TargetModel

SourceModel.fields interface SourceModel interface TargetModel
attr() string, number, boolean, plain objects, arrays of primitives/plain objects
fk('TargetModel') TargetModel QuerySet<SourceModel>
oneToOne('TargetModel') TargetModel SourceModel
many('TargetModel') MutableQuerySet<TargetModel> MutableQuerySet<SourceModel>

About

Integrating experimental redux-orm types with create-react-app

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published