use-rematch-model

dynamic load rematch model

NOTE: [email protected] based on @rematch/core; [email protected] 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

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

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

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')> {}
}