Digamos que tengo la siguiente función que devuelve una ruta de archivo del estado, según el nombre del archivo (como parámetro de entrada) y, si no existe, devuelve una URL de un servidor.
const getFilepath = (state: IRootState) => (url: string) => { const file = getFilenameByURL(state, url); return file ? file : getRemoteFilePath(url); } Ahora tengo un componente FileBrowser , que tiene una lista de nombres de archivos. Aquí, quiero inicializar esta función. Actualmente lo haría así:
const { getFilepathByFilename } = useSelector((state: IRootState) => ({ getFilepathByFilename: getFilepath(state)}))Ahora, cuando quiero acceder a la ruta desde un elemento de la lista, lo hago así:
const filePath = getFilepathByFilename(fileName) Ahora, esto parece funcionar, pero me encuentro con un bucle de reproducción infinito porque la función getFilepath en FileBrowser se configura una y otra vez.
Siento que estoy implementando un patrón incorrecto aquí. ¿Cómo haría para crear una función que acceda al estado, pero que no cause repeticiones infinitas? ¡Gracias por tu ayuda!
Para persistir la referencia de la función a través de la representación del componente, puede usar useCallback, así:
const getFilepath = useCallback ((state: IRootState) => (url: string) => { const file = getFilenameByURL(state, url); return file ? file : getRemoteFilePath(url); }, [])