Giter Club home page Giter Club logo

redux-orm-ex-types-react-example's Introduction

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>

redux-orm-ex-types-react-example's People

Contributors

tomasz-zablocki avatar

Stargazers

 avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.