Ante esta situación:
Mi pregunta es, ¿es "seguro" hacerlo, o podría haber efectos secundarios problemáticos, y si es así, qué y por qué? En particular, ¿puede esto afectar el rendimiento, puede alterar la forma en que Redux vuelve a calcular los estados y puede alterar la representación de los componentes de React si el objeto se les pasa desde la tienda de Redux como accesorio?
Nunca debe mutar los valores que están en el estado Redux, nunca :
Esto puede causar y causará absolutamente efectos secundarios, incluida la posibilidad de que la aplicación no se reproduzca cuando sea necesario.
Si este "objeto mutable" al que te refieres es algún tipo de instancia de clase o similar, tampoco pertenece a la tienda Redux:
editar
Según la discusión en los comentarios, así es como sugeriría manejar algo como este contexto de WebGL:
const SomeParentComponent = () => { // Use Redux state to decide when we should show this const showWebGl = useSelector(state => state.ui.showWebGl); // Standard hooks "forceRender" implementation const [, forceRender] = useReducer(c => c + 1, 0) // Ref to hold the WebGL instance const webGlRef = useRef(null); useLayoutEffect(() => { if (showWebGl) { webGlRef.current = magicallyCreateWebGlInstance(); forceRender(); // have to force a re-render to pass down the ref value } return () => { if (webGlRef.current) { magicallyDestroyWebGlInstance(webGlRef.current) } } }, [showWebGl]) return ( <MyWebGlContext.Provider value={webGlRef.current> <RestOfAppGoesHere /> </MyWebGlContext.Provider> ) }La instancia de WebGL en sí no pertenece a la tienda, porque no es estatal y no es serializable. Una tienda Redux no debe usarse solo como una forma de entregar valores arbitrarios, especialmente si esos valores no son datos simples de JS.
De esta manera, el estado de Redux aún determina si la instancia de WebGL se está creando, pero la instancia en sí vive completamente en la capa de la interfaz de usuario y aún es accesible para el resto del árbol de componentes.