Recoil初探

45 阅读 0 评论 30 点赞

我是靠谱客的博主忐忑发夹，最近开发中收集的这篇文章主要介绍Recoil初探，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

第一步引入Recoil

// 在App.tsx文件中 使用RecoilRoot包裹页面内容
import { RecoilRoot } from 'recoil'
<RecoilRoot>
<Provider {...stores}>
<Layout>
<Suspense fallback={<Loading></Loading>}>
<Router>
<RouteList />
</Router>
</Suspense>
</Layout>
</Provider>
</RecoilRoot>

第二步初始化Recoil

在src目录下新建recoil文件作为我们的store文件夹
在recoil文件里新建index.tsx文件作为总的store出入口
在recoil文件里新建apis.tsx文件作为总的api的出入口
以home为例新建一个home文件夹，在里面新建 api.tsx、index.tsx两个文件

// recoil/index.tsx
export { default as homeState } from './home'

// recoil/apis.tsx
export * as homeApis from './home/api'

// recoil/home/types.tsx
import { RecoilState, RecoilValueReadOnly } from 'recoil'
export interface ResponseProps {
code?: number
status?: number
message?: string
[key: string]: any
}
export interface UserInfo {
enterpriseName: string
nickName: string
registerTime: number
userFaceUrl: string
userName: string
[key: string]: any
}
export type Count = RecoilState<number>
export type CountSelectors = RecoilValueReadOnly<string>
export type RecoilUserInfo = RecoilState<Partial<UserInfo>>
export type UserInfoSelectors = RecoilValueReadOnly<string>

// recoil/home/api.tsx
import axios from '@/utils/axios'
import { message } from 'antd'
import { ResponseProps } from './types'
export const getInfo = async params => {
try {
const res: ResponseProps = await axios.get(
`/api/user/get-account-info`,
params
)
if (res.code === 200) {
message.success(res.msg)
return res.data
}
} catch (e) {
console.log(e)
}
}

// recoil/home/index.tsx
import { atom, selector } from 'recoil'
import { homeApis } from '../apis'
import {
Count,
CountSelectors,
RecoilUserInfo,
UserInfoSelectors
} from './types'
const count: Count = atom({
key: 'count',
default: 0
})
const countSelectors: CountSelectors = selector({
key: 'countSelectors',
get: async ({ get }) => {
// get
const res = await homeApis.getInfo({
userId: '1421990461843255298'
})
console.log('???? ~ file: home.tsx ~ line 24 ~ get: ~ res', res)
return res.userName
}
})
const userInfo: RecoilUserInfo = atom({
key: 'userInfo',
default: {}
})
const userInfoSelectors: UserInfoSelectors = selector({
key: 'userInfoSelectors',
get: ({ get }) => {
const target = get(userInfo)
console.log('???? ~ file: home.tsx ~ line 21 ~ target', target)
return target.nickName
}
})
export default { userInfo, userInfoSelectors, countSelectors, count }

使用Recoil

import React from 'react'
import styles from './index.module.less'
import { Button } from 'antd'
import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
import { homeState } from '@/recoil'
import { homeApis } from '@/recoil/apis'
const Home = () => {
const [userInfo, setUserInfo] = useRecoilState(homeState.userInfo)
const info = useRecoilValue(homeState.userInfoSelectors)
const dealCount = useRecoilValue(homeState.countSelectors)
const setCount = useSetRecoilState(homeState.count)
const btnClick = async () => {
const res = await homeApis.getInfo({
userId: 'xxxxxx'
})
setUserInfo(res)
}
const btnFilter = () => {
console.log(info)
setCount(n => n + 1)
}
return (
// 多个样式处理方法classNames 可使用三元
<div className={styles.home}>
<Button onClick={btnClick}>按钮</Button>
<Button onClick={btnFilter}>按钮</Button>
<div>{userInfo.userName}</div>
<div>{info}</div>
<div>{dealCount}</div>
</div>
)
}
export default Home