如何正确初始化与 redux 状态交互的函数？

Question

假设我有以下函数，其中 returns 来自状态的文件路径，基于文件名（作为输入参数），如果它不存在 returns 和 URL 来自服务器。

const getFilepath = (state: IRootState) => (url: string) => {
    const file = getFilenameByURL(state, url);
    return file ? file : getRemoteFilePath(url);
}

现在我有一个组件 FileBrowser，它有一个文件名列表。在这里，我想初始化这个函数。目前我会这样做：

const { getFilepathByFilename } = useSelector((state: IRootState) => ({ getFilepathByFilename: getFilepath(state)}))

现在，当我想从列表中的元素访问路径时，我会这样做：

const filePath = getFilepathByFilename(fileName)

现在这似乎可行，但我运行进入了一个无限的重新渲染循环，因为 FileBrowser 中的 getFilepath 函数被一遍又一遍地设置。

我觉得我在这里实施了错误的模式。我将如何创建一个访问状态但不会导致无限重新渲染的函数？感谢您的帮助！

Answer 1

要在组件重新渲染期间保留函数引用，您可以使用 useCallback，如下所示：

const getFilepath = useCallback ((state: IRootState) => (url: string) => {
    const file = getFilenameByURL(state, url);
    return file ? file : getRemoteFilePath(url);
}, [])

如何正确初始化与 redux 状态交互的函数？

How do I correctly initialize a function which interacts with the redux state?

javascript

typescript

reactjs

redux

react-redux