1.0.0-1 • Published 4 years ago
use-rematch-model v1.0.0-1
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
;
how it works?
just use rematchstore.model
in react hooks
features
- support dynamic load rematch model with
hooks
- support dynamic load rematch model with
hooks and model.name
useage
checkout example
config store
import { init } from '@rematch/core'
import { config } from 'use-rematch-model'
const store = init({
models: {
globalModel
}
})
config.store = store
dynamic load model
// 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
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
useRematchModel(about)
vsuseRematchModel('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 asuseRematchModel('about')
useRematchModel('about')
will get state and dispatch from redux-store
how to imporve type intellience for
useRematchModel('about')
. You need overwrite defaultState and Dispatch
types intypings.d.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')> {} }