An open API service indexing awesome lists of open source software.

https://github.com/aigoncharov/types-redux-orm

Typescript types for redux-orm
https://github.com/aigoncharov/types-redux-orm

redux-orm typescript typescript-typings typings

Last synced: 24 days ago
JSON representation

Typescript types for redux-orm

Awesome Lists containing this project

README

        

# types-redux-orm
## NO LONGER SUPPORTED. USE [@types/redux-orm](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/redux-orm)

Typescript types for [Redux Orm 0.9.4](https://github.com/tommikaikkonen/redux-orm)

## Important

It's an alpha version of types I currently use in one of my projects. They will be updated as I proceed with the project. No backward compatibility guaranteed.

## Roadmap

01/13/18 - Beta release
02/03/18 - Stable release and merge into [DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped)

## Install

```
npm install types-redux-orm
```

Modify your tsconfig.json as following:

```
...
"typeRoots": [
"./node_modules/types-redux-orm",
"./node_modules/@types"
],
...
```

## Recipes

### Model

```javascript
import { attr, IORMCommonState, IORMId, ITableState, Model, ORM } from 'redux-orm'

export class Test extends Model {
static modelName = 'Test'

static fields = {
test: attr(),
isFetching: attr({ getDefault: () => false }),
id: attr()
}
}

// core data which we do not have defaults for
export interface ITestStateItem {
test: string
}

// optional data we provide defaults for
export interface IFetchIndicatorState {
isFetching: boolean
}

// id attr is added automatically by redux-orm therefore we have IORMId interface
export type ITestState = ITableState

export interface ITestORMState extends IORMCommonState {
Test: ITestState
}

interface ITestORMModels {
Test: typeof Test
}

const orm = new ORM()
orm.register(Test)
export default orm
```

### Reducer

```javascript
interface ITestDTO {
test: string
}

const reducerAddItem = (state: ITestORMState, action: ActionMeta): ITestORMState => {
const session = orm.session(state)
session.Test.upsert(action.payload)
return session.state
}
```

### Selector

```javascript
import { createSelector as createSelectorORM, IORMId, ISession } from 'redux-orm'

interface ITestDisplayItem {
test: string
}
type ITestDisplayItemList = ITestDisplayItem[]

export const makeGetTestDisplayList = () => {
const ormSelector = createSelectorORM(orm, (session: ISession) =>
session.Test
.all()
.toRefArray()
.map((item) => ({ ...item }))
})
return createSelector(
({ test }) => test,
ormSelector
)
}
```