umi项目中使用recoil替换dva

简介: 本文介绍使用recoil库来在umi项目中进行组件间的状态共享,部分替换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

请查阅中文文档

目录
相关文章
|
3月前
|
JavaScript
Vue3基础(19)___vite.config.js中配置路径别名
本文介绍了如何在Vue 3的Vite配置文件`vite.config.js`中设置路径别名,以及如何在页面中使用这些别名导入模块。
148 0
Vue3基础(19)___vite.config.js中配置路径别名
|
2月前
|
存储 资源调度 JavaScript
Vite是什么?怎样使用Vite创建Vue3项目?
Vite是什么?怎样使用Vite创建Vue3项目?
139 0
|
5月前
|
JavaScript 测试技术
Vue开发项目过程中环境变量的配置(vite、vue3、ts)
Vue开发项目过程中环境变量的配置(vite、vue3、ts)
111 0
|
7月前
Vue3+Vite+Js项目搭建之三:vue-router 路由构建
Vue3+Vite+Js项目搭建之三:vue-router 路由构建
229 1
|
7月前
Vue3+Vite+Js项目搭建之二:vite.config.js 构建
Vue3+Vite+Js项目搭建之二:vite.config.js 构建
157 1
|
7月前
乾坤子应用配置(vue3+vite)
乾坤子应用配置(vue3+vite)
598 0
|
7月前
umi的函数
umi的函数
60 0
|
JavaScript 小程序
VUE3(三十五)vite构建的项目配置使用.env文件
VUE3(三十五)vite构建的项目配置使用.env文件如标题所示:我要在vue3项目使用.env文件。 先介绍一下项目背景,项目使用VUE3.2 + vite2.9 + typescript搭建。 我基本断定,vue3使用.env文件的方法可能和vue2使用.env文件的方法可能是不同,关于vue2项目如何使用.env文件,请移步《VUE2(七)VUE配置env文件使用》
427 1
|
SQL 资源调度 前端开发
VUE3(三十四)项目启动sass报错
我有个不是很好的习惯,每天启动前端项目的时候,都会把项目中使用到的组件更新到最新的版本。其实这样是非常不好的。为什么呢?新版本除了修复之前的问题,也有可能会带来新的问题。 正常的做法大概是,等新版本发布了一段时间之后,再去更新,这样就相对保险一丢丢。 而且,目前前端项目中组件依赖太多,各个组件之间,难免会有兼容性的问题。今天在将组件更新到最新版本之后,启动项目,就遇到了问题。 报错如下: bash 复制代码 ERROR in ./src/pages/porder/index.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/s
327 1
|
资源调度 前端开发 JavaScript
ant-design-vue+vite主题切换详细步骤(简单案例)
ant-design-vue+vite主题切换详细步骤(简单案例)
922 0