React中完整实例讲解Recoil状态管理库的使用

import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import { RecoilRoot } from "recoil";
import App from "./App";
import "antd/dist/reset.css";
import "animate.css";
import "@/assets/styles/index.scss";
// react 18 创建（会导致 antd 菜单折叠时闪烁，等待官方修复）
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  // * react严格模式
  // <React.StrictMode>
  <BrowserRouter>
   <RecoilRoot>
    <App></App>
   </RecoilRoot>
  </BrowserRouter>,
  // </React.StrictMode>,
);

// 示例封装
import { atom, selector } from "recoil";
import ThemeConfig from "@/config/themeConfig";
import { ITheme } from "@/interface/theme";
const theme: ITheme = {
  title: import.meta.env.VITE_TITLE,
  theme: "default",
  i18n: ThemeConfig.i18nDef,
};
export const themeState = atom({
  key: "themeState",
  default: theme,
});
export default {
  i18nState: atom({
   key: "i18nState",
   default: ThemeConfig.i18nDef,
  }),
  useThemeState: selector({
   key: "useThemeState",
   get: ({ get }) => {
    return get(themeState);
   },
   set: ({ get, set }, newValue) => {
    const oldValue = get(themeState);
    const updateValue = Object.assign({}, oldValue, newValue);
    set(themeState, updateValue);
   },
  }),
};

// index.ts入口
import Theme from "./modules/theme";
export default {
  …Theme,
};

import { useEffect } from "react";
import { Row, Col, Pagination, Switch } from "antd";
import { atom, useSetRecoilState, useRecoilState, useRecoilValue } from "recoil";
import Store from "@/store";
import "@/assets/styles/page/home.scss";
export default function Home() {
  const [i18nState, setI18nState] = useRecoilState(Store.i18nState);
  const setThemeState = useSetRecoilState(Store.useThemeState);
  const themeState = useRecoilValue(Store.useThemeState);
  useEffect(() => {
   setI18nState("en-us");
   console.log(i18nState);
  }, []);
  const onChange = (checked: boolean) => {
   console.log(`switch to ${checked}`);
   setThemeState({ i18n: "en-us" });
   if (checked) {
    setThemeState({ i18n: "zh-cn" });
   } else {
    setThemeState({ i18n: "en-us" });
   }
   console.log(themeState);
  };
  return (
   <Row justify="center" className="content-body home-box">
    <Col span={24}>
     <Pagination total={85} showSizeChanger showQuickJumper showTotal={(total) => `Total ${total} items`}></Pagination>
     <Switch defaultChecked onChange={onChange} />
    </Col>
   </Row>
  );
}

export const demoState = atom({
  key: 'demoState',
  default: ”demo”,
});
export const atomState = atom({
  key: 'atomState',
  default: {i18n: “en”},
});

export const useAtomState = selector({
  key: 'useAtomState',
  get: ({ get }) => {return get(atomState)},
  set: ({ get, set }, newValue) => {set(atomState, newValue)},
});

const [demoState, setDemoState] = useRecoilState(demoState);

const demoState = useRecoilValue(demoState);

const setDemoState = useSetRecoilState(demoState);