plugin-model's Introduction

@umijs/plugin-model

Data flow solution based on hooks and umi plugin.

Install

# or yarn
$ npm install @umijs/plugin-model --save

Usage

Getting started in 3 steps.

1. Configure in `.umirc.js`

export default {
  plugins: [['@umijs/plugin-model', options]],
};

2. Add model file in `src/models`

// src/models/count.ts
import { useState } from 'react';

export default () => {
  const [count, setCount] = useState(0);
  const increment = () => setCount(c => c + 1);
  const decrement = () => setCount(c => c - 1);
  return { count, increment, decrement };
};

3. Use it in your React Component or other models

import React from 'react';
import { useModel } from 'umi';

export default () => {
  const { count } = useModel('count');
  return <>{count}</>;
};

Full example can find in ./example.

Plugin API

Register extra models

Add extra models in plugins.

// use custom namespace
// @@ is used for internal models
api.register('addExtraModels', () => [
  {
    absPath: join(paths.absTmpDirPath, 'init', 'user.tsx'),
    namespace: '@@user',
  },
  {
    absPath: join(paths.absTmpDirPath, 'init', 'access.tsx'),
    namespace: '@@access',
  },
]);

// use default namespace
api.register('addExtraModels', () => [
  join(paths.absTmpDirPath, 'init', 'a.tsx'),
  join(paths.absTmpDirPath, 'init', 'b.tsx'),
]);