Actualmente estoy aprendiendo el kit de herramientas de redux y quiero almacenar el estado del modo oscuro en localStorage para que, si los usuarios actualizan la página, el modo seleccionado permanezca igual. Mi aplicación se ve así:
índice.js
import ReactDOM from "react-dom"; import { Provider } from "react-redux"; import { configureStore } from "@reduxjs/toolkit"; import darkModeReducer from "./darkModeSlice"; import App from "./App"; const store = configureStore({ reducer: { darkMode: darkModeReducer, }, }); ReactDOM.render( <Provider store={store}> <App /> </Provider>, document.getElementById("root") );darkModeSlice.js
import { createSlice } from "@reduxjs/toolkit"; const initialState = { darkMode: false, }; export const darkModeSlice = createSlice({ name: "darkMode", initialState, reducers: { toggleDarkMode: (state) => { state.darkMode = !state.darkMode; }, }, }); export const { toggleDarkMode } = darkModeSlice.actions; export default darkModeSlice.reducer;¿Cuál sería la solución óptima para esto? Tenga en cuenta que solo quiero almacenar el estado del modo oscuro en el almacenamiento local, por lo que si agrego otros reductores en el futuro, sus valores no se guardarán automáticamente allí.
Podrías cambiar tu estado inicial en darkModeSlice
const initialState = { darkMode: localStorage.getItem("darkMode") || false }Si localstorage no está definido, automáticamente será falso. Y cuando el usuario cambia el modo oscuro, lo almacena con:
localStorage.setItem("darkMode", darkMode);