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

请查阅中文文档