Estoy tratando de pasar un elemento como mi estado inicial. como esto:
import { createSlice } from "@reduxjs/toolkit"; import { Home } from "@mui/icons-material"; export const setIconSlice = createSlice({ name: "IconSet", initialState: { icon: <Home />, }, reducers: { setIcon: (state, action) => { state.icon = action.payload; }, }, }); export const { setIcon } = setIconSlice.actions; export default setIconSlice.reducer;Quiero tener el ícono de inicio de la interfaz de usuario del material como mi estado inicial, pero como pueden adivinar, obtengo
Se detectó un valor no serializable en el estado
Traté de deshabilitar el serializable check del middleware de la tienda. El error desaparece pero todavía no puedo ver ningún icono.
¿Hay alguna forma de pasar un elemento como un estado? No recibo ningún error con useState pero lo quiero globalmente en toda mi aplicación , así que no quiero pasarlo de un elemento a otro con useState
Bueno, sí, redux te obliga a usar elementos serializables, como objetos simples, en el estado.
Estaba pensando en hacer uso de un valor —enums— que te permitiera importar elementos previamente importados con lazy .
initialState: { // icon values will be strings icon: 'home', },Y en tu componente prueba esto:
// lazy import the components for code-splitting const HomeIcon = React.lazy(() => import('./Home')); const SearchIcon = React.lazy(() => import('./Search')); // get the current icon from the state const icon = useSelector(state => state.icon); // helper const getStateIcon = () => { // return lazy loaded element depending of the icon string value switch (icon) { case 'home': return <HomeIcon />; case 'search': return <SearchIcon />; default: return <HomeIcon />; } } // in your jsx file <React.Suspense fallback={<div>Loading...</div>}> {getStateIcon()} </React.Suspense>De esta manera, tendrá la opción de dividir el código y reducir el tiempo de carga.
Comprueba cómo funciona la lazy en este sandbox
Puede usar una cadena para guardar el icono
initialState:{ icon: 'home'}En App.js (o cualquier componente que necesite usar icono)
const icon = useSelector(state=>state.icon)Luego, renderice el componente de inicio condicionalmente según el ícono almacenado en redux
icon ==='home' && <Home/>Recomendaría asignar el nombre del ícono a una instancia de componente, a redux no le gustan las cosas que no puede serializar por una razón:
// Import all icons you want to make available import { Home, OtherIcon } from "@mui/icons-material"; // Map their name to component instances export const icons = { home: <Home />, othericon: <OtherIcon /> }; // Now you simply put 'home' (as a string) in redux for the initial state // When using the icon, retrieve it like this: const iconPath = useSelector(state => state.iconPath); const icon = icons[iconPath];