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;

  

- use-rematch-model
- how it works?
- features
- useage
- Q&A

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

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 (



)
}
`

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 (
add {state}
)
}
`

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 {}
export interface DynamicRootDispatch extends ExtractRematchDispatchersFromModels {}
}
``