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