umi項目中使用recoil替換dvaumi項目中使用recoil替換dva

umi項目中使用

recoil

替換

dva

因為之前做的一個項目不能使用dva進行狀态管理并替換成了recoil，本文對替換過程做一下記錄，介紹使用

recoil

庫來在

umi

項目中進行元件間的狀态共享，部分替換

dva

的功能。

本文使用的的umi版本為3.x。

禁用

dva

插件

// config/config.ts
export default defineConfig({
    plugins: ['./config/umi-skip-dva-plugin'],
});

// config/umi-skip-dva-plugin.ts
module.exports = function (api) {
  api.describe({
    id: 'umi-skip-dva-plugin',
    key: 'umi-skip-dva-plugin',
  });
  api.logger.warn(
    '請注意以下插件被項目禁用:',
    '@umijs/plugin-dva',
    '請使用recoil來進行共享狀态管理,
  );
  api.skipPlugins(['@umijs/plugin-dva']);
};           

umi

項目中內建

recoil

:

使用插件快速內建：

npm install umi-plugin-recoil
# or
yarn add umi-plugin-recoil           

這個插件為我們設定好了recoil環境：

// src/index.ts
import { IApi } from 'umi';
import { join } from 'path';

export default (api: IApi) => {
  api.addRuntimePlugin(() => join(__dirname, 'RecoilRoot'));
};

// src/RecoilRoot.jsx
import React from 'react';
import { RecoilRoot } from 'recoil';

export const rootContainer = (element) => {
  return (
    <RecoilRoot>
      <span style={{ display: 'none' }}>RecoilRoot</span>
      {element}
    </RecoilRoot>
  );
};
           

定義共享狀态：

// src/pages/home/recoil/homeModel.ts

import { atom } from 'recoil';

export interface IState {
  name: string;
  id: string;
}

const selecteProjectState = atom<IState | undefined>({
  key: 'homeState',
  default: undefined,
});

export default selecteProjectState;           

訂閱共享狀态

// src/pages/home/index.ts
import { useRecoilValue } from 'recoil';
import homeState from './recoil/homeState';

export default () => {
    const state = useRecoilValue(homeState);
    return <div>{state?.name ?? '-'}</div>;
}           

修改共享狀态

// src/pages/home/edit/index.ts
import { useRecoilState } from 'recoil';
import homeState from '../recoil/homeState';

const Update = () => {
    const [_, updateState] = useRecoilState(homeState);
    return <button onClick={() => updateState({ id: '123', name: '123' })}>修改</button>;           

關于

recoil

請查閱

中文文檔