# use-rematch-model

> > dynamic load rematch model

Latest version **1.0.0-1** (published 2019-12-30) · 0 weekly downloads

## Install

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

## Health

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

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

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0-1 |
| Published | 2019-12-30 |
| First published | 2019-12-28 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 11 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | jiangweixian1994 |
| Keywords | react-hooks, dynamic-load, code-split, redux, rematch, rematch2 |

## Links

- npm: https://www.npmjs.com/package/use-rematch-model
- npm.io page: https://npm.io/package/use-rematch-model

## Recent versions

- 1.0.0-1 (latest) — 2019-12-30
- 1.0.0-0 — 2019-12-28
- 0.2.0 — 2019-12-28
- 0.1.0 — 2019-12-28

## README

# use-rematch-model
> dynamic load rematch model

**NOTE:** `use-rematch-model@v0.x.x` based on `@rematch/core`; `use-rematch-model@v1.x.x` based on `@rematch2/core`; 

[![npm](https://img.shields.io/npm/v/use-rematch-model?style=for-the-badge)](https://github.com/JiangWeixian/use-rematch-model) [![GitHub](https://img.shields.io/github/license/jiangweixian/use-rematch-model?style=for-the-badge)](https://github.com/JiangWeixian/use-rematch-model) [![npm bundle size](https://img.shields.io/bundlephobia/min/use-rematch-model?style=for-the-badge)](https://github.com/JiangWeixian/use-rematch-model)

- [use-rematch-model](#use-rematch-model)
  - [how it works?](#how-it-works)
  - [features](#features)
  - [useage](#useage)
  - [Q&A](#qampa)

## how it works?

just use `rematchstore.model` in react hooks

## features

1. support dynamic load rematch model with `hooks`
2. support dynamic load rematch model with `hooks and model.name`

## useage
> checkout [example](/example/src/pages/About/index.tsx)

**config store**

```ts
import { init } from '@rematch/core'
import { config } from 'use-rematch-model'

const store = init({
  models: {
    globalModel
  }
})

config.store = store
```

**dynamic load model**

```tsx
// rematch model named about
export type State = number

export const about = {
  name: 'about',
  state: 0,
  reducers: {
    increment: (state: State) => state + 1,
  },
  effects: {
    async incrementAsync(this: any) {
      this.increment()
    },
  },
}


import React from 'react'
import { useRematchModel } from 'use-rematch-model'

import { about } from './models/about'

export default () => {
  const [state, dispatch] = useRematchModel(about)
  const handleClick = () => dispatch.increment()
  return (
    <div onClick={handleClick}>
      about {state}
    </div>
  )
}
```

**use about in any fc component**

```tsx
import React from 'react'
import { useRematchModel } from 'use-rematch-model'

export const Counter = () => {
  const [state] = useRematchModel('about') // or useRematchModel(about)
  return (
    <span>add {state}</span>
  )
}
```

## Q&A

1. `useRematchModel(about)` vs `useRematchModel('about')`

  - `useRematchModel(about)` in many components, about-model will be loaded by rematch if about-model did not exit in rematch models. if about-model already exit in rematch models, behave same as `useRematchModel('about')`
  - `useRematchModel('about')` will get state and dispatch from redux-store

2. how to imporve type intellience for `useRematchModel('about')`. You need overwrite default `State and Dispatch` types in `typings.d.ts`

  ```ts
  import { ExtractRematchStateFromModels, ExtractRematchDispatchersFromModels } from '@rematch/core'

  declare module 'use-rematch-model/default' {
    export interface DynamicRootState extends ExtractRematchStateFromModels<typeof import('./src/store/dynamic-models')> {}
    export interface DynamicRootDispatch extends ExtractRematchDispatchersFromModels<typeof import('./src/store/dynamic-models')> {}
  }
  ```

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