Estoy gestionando el estado del tema como un átomo de retroceso.
Si el usuario cambia el tema a través de la interfaz de usuario, el estado del átomo correspondiente cambiará.
Quiero guardar el valor del tema cambiado aquí en almacenamiento local. Para hacer eso, necesitamos saber cuándo cambia ese estado.
Por supuesto, puede agregar código de almacenamiento de almacenamiento local antes de llamar al cambio de estado del átomo correspondiente, pero esto es demasiado ineficiente si el átomo se usa en muchos lugares.
¿Debo usar un selector en este punto? Sin embargo, dado que un tema es un solo estado, no es intuitivo tratarlo como un estado derivado para extender la lógica de cambio de estado.
Cualquier ayuda sería apreciada si usted sabe.
código de ejemplo
import { StrictMode } from "react"; import ReactDOM from "react-dom"; import { RecoilRoot, atom, useRecoilState } from "recoil"; type ThemeItem = "light" | "dark"; // 🧐: I want to do some extra work when this state changes (ex: Save the changed state to localStorage) const themeState = atom<ThemeItem>({ key: "themeState", default: "light", }); function App() { const [theme, setTheme] = useRecoilState(themeState); function handleTheme(theme: ThemeItem) { return () => setTheme(theme); } return ( <> <h3>{theme}</h3> <button onClick={handleTheme("light")}>light</button> <button onClick={handleTheme("dark")}>dark</button> </> ); } ReactDOM.render( <StrictMode> <RecoilRoot> <App /> </RecoilRoot> </StrictMode>, document.getElementById("root") );La forma en que resolví esto antes es implementando un ThemeProvider (o como quieras llamarlo) y luego usando useEffect tanto para almacenar como para cargar valores desde localStorage :
import { StrictMode, useEffect } from "react"; import ReactDOM from "react-dom"; import { RecoilRoot, atom, useRecoilState } from "recoil"; type ThemeItem = "light" | "dark"; // 🧐: I want to do some extra work when this state changes (ex: Save the changed state to localStorage) const themeState = atom<ThemeItem>({ key: "themeState", default: "light", }); function ThemeProvider() { const [theme, setTheme] = useRecoilState(themeState); useEffect(() => { // Save theme in localStorage on change localStorage.setItem('theme', theme); }, [theme]); useEffect(() => { // Load theme from localStorage on mount if (!localStorage.getItem('theme')) return; setTheme(localStorage.getItem('theme') as ThemeItem); }, []); } function App() { const [theme, setTheme] = useRecoilState(themeState); function handleTheme(theme: ThemeItem) { return () => setTheme(theme); } return ( <> <h3>{theme}</h3> <button onClick={handleTheme("light")}>light</button> <button onClick={handleTheme("dark")}>dark</button> </> ); } ReactDOM.render( <StrictMode> <RecoilRoot> <ThemeProvider /> <App /> </RecoilRoot> </StrictMode>, document.getElementById("root") );