Actualicé mis paquetes y VScode me dijo que createStore estaba depreciado. Así que fui a reemplazarlo
Mi archivo de tienda, he incluido la línea original como comentario en la parte inferior
import { configureStore } from '@reduxjs/toolkit'; import { Action, createStore } from 'redux' export type State = { context: AudioContext | null} export const START_AUDIO = "startAudio"; const initialState = {context: null} const reducer = (state: State = initialState, action: Action<String>) => { switch (action.type) { case START_AUDIO: if (state.context == null) { return { ...state, context: new AudioContext() } } } return state } export const Store = configureStore({reducer}) // export const Store = createStore(reducer)usando redux
export function AudioContext() { const dispatch = useDispatch<Dispatch<Action<String>>>(); const context = useSelector((state: State) => state.context) return ( <button disabled={(context == null) ? false : true} onClick={() => dispatch({type: START_AUDIO}) }>Start Audio Context</button> ) }componente de la aplicación
import '../styles/globals.css' import Head from 'next/head' import { Store } from '../code/util/store/store' import { Provider } from 'react-redux' import { AppProps } from 'next/app'; export default function MyApp({ Component, pageProps }: AppProps) { return (<> <Head> <title>Test App</title> <link rel="icon" href="/favicon.ico" /> </Head> <Provider store={Store}> <Component {...pageProps} /> </Provider> </>) } Con configureStore() , la consola me advierte sobre poner objetos no serializables en state . Dicen que es posible, pero cuando trato de usarlo, aparece un error de Maximum call stack size .
Intenté eliminar otros usos (además de configurarlo) del objeto de estado redux y aún obtuve ambos errores, también intenté usar una cadena, esto elimina la advertencia y el error. Por lo tanto, parece que el uso de un AudioContext en el estado ya no se admite por el motivo que sea.
¿Estoy haciendo esto mal? ¿Debo dejar de usar Redux para esto? ¿De qué otra manera puedo lograr esto?
Sin embargo, encontré este problema en github , de acuerdo con mis node_modules , estoy ejecutando 7.18.0 de @babel/core
En general, Redux es una herramienta de administración de estado, lo que significa más o menos: datos. Por lo general, esos datos deben representarse como un objeto o matriz de JavaScript sin formato, no como una instancia de clase.
Lo que está haciendo aquí es más un caso de uso de "inyección de dependencia": tiene una determinada clase con la funcionalidad proporcionada que desea transmitir a los componentes secundarios.
En este caso, le recomiendo que use React Context, ya que Context es un mecanismo de inyección de dependencia (pero no muy adecuado para la propagación de valores de estado, pero eso no es nada que desee hacer aquí en primer lugar).