Recoil初探

96 阅读 0 评论 64 点赞

我是靠谱客的博主忐忑发夹，这篇文章主要介绍Recoil初探，现在分享给大家，希望可以做个参考。

第一步引入Recoil

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 在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两个文件

复制代码

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

复制代码

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

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 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>

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 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)
}
}

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
// 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

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
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