# rematch-model

> Class-based models for rematch

Latest version **0.1.9** (published 2019-06-10) · ISC license · 0 weekly downloads

## Install

```sh
npm install rematch-model
pnpm add rematch-model
yarn add rematch-model
bun add rematch-model
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.9 |
| Published | 2019-06-10 |
| First published | 2018-12-26 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 6.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | today- |
| Maintainers | today- |
| Keywords | rematch, class, model, react, redux |

## Links

- npm: https://www.npmjs.com/package/rematch-model
- Repository: https://github.com/today-/rematch-model
- Issues: https://github.com/today-/rematch-model/issues
- npm.io page: https://npm.io/package/rematch-model

## Dependencies (1)

- [@rematch/core](https://npm.io/package/@rematch/core.md) ^1.0.6

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.1.9 (latest) — 2019-06-10
- 0.1.8 — 2019-03-05
- 0.1.7 — 2019-02-21
- 0.1.6 — 2019-02-15
- 0.1.5 — 2019-02-15
- 0.1.4 — 2019-02-15
- 0.1.3 — 2019-02-13
- 0.1.2 — 2019-01-10
- 0.1.1 — 2018-12-29
- 0.1.0 — 2018-12-26

## README

# rematch-model

Class-based models for [rematch](https://github.com/rematch/rematch), containing state, actions, reducers and selectors.
![Screesnhot of example mode](./screenshot.png)

## Usage

Prerequisites:

[Rematch](https://rematch.gitbooks.io/rematch/#getting-started)

[Babel decorators](https://github.com/loganfsmyth/babel-plugin-transform-decorators-legacy)

#### With immer

[Rematch Immer Plugin](https://github.com/rematch/rematch/tree/master/plugins/immer)

All reducers can work with state immutabily (they becomes wrapped with [Immer](https://github.com/mweststrate/immer)'s `produce` behind the scenes):

```jsx harmony
    @reducer
    ADD_TODO({ id, text }) {
        this.state[id] = { id, text, completed: false };
    }
    
    @reducer
    TOGGLE_TODO({ id }) {
        this.state[id].completed = !this.state[id].completed;
    }
```


#### Without immer

Classic redux-style reducers, returning new state:

```jsx harmony
    @reducer
    TOGGLE_TODO({ id }) {
        return {
            ...this.state,
            [id]: {
                ...this.state[id],
                completed: !this.state[id].completed
            }
        };
    }
```

#### Connecting to React components with rematch-inject

[rematch-inject](https://github.com/today-/rematch-inject) transfers model's state and all public methods to your React class component:

```jsx harmony
@inject('todo')
class TodoList extends React.Component {
```

#### Connecting to components the old way

You can also connect store to your React component using [react-redux](https://github.com/reduxjs/react-redux) `connect` and mapStateToProps + mapDispatchToProps:

```jsx harmony
@connect(({ todo }) => ({ todo }), ({ todo }) => ({ ...todo }))
```

`connect` and `inject` can be also composed and used without decorators.

#### Selectors

Injecting static method of your model works as selector and connects dynamically calculated props to your component:

```jsx harmony
@inject(TodoStore.withToggled)
```

```jsx harmony
	static withToggled({ todo }) {
		return {
			toggled: Object.keys(todo).filter(f => todo[f].completed),
		};
	}
```

#### TypeScript

TypeScript examples:

[Store](./examples/todo-store-ts.ts)

[Injecting to components](./examples/todo-list-ts.tsx)

```typescript jsx
import { inject, Injected } from 'rematch-inject';

export type TodoListProps = 
    Injected<TodoStore> &
    Injected<typeof TodoStore.withToggled>;

@inject('todo')
@inject(TodoStore.withToggled)
export default class TodoList extends React.Component<TodoListProps> {
```

## Inspiration

[rematch-class-model](https://github.com/lyingd/rematch-class-model)

[MobX](https://github.com/mobxjs/mobx)

---
_Source: https://npm.io/package/rematch-model · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._