以 redux 状态存储从 useRef 返回的对象

Question

我有一个问题。我正在使用 next js 创建一个音乐平台（如 spotify）并管理状态，我使用 redux toolkit。为了播放音乐，我在一个组件中添加了 audio，该组件具有一些组件来更改音乐时间或音量等。为了更改音量或时间等，我使用了 useRef 钩子并更改了音乐时间几乎是这样的（这是一个 return 一些元素仅适用于大型设备的组件，如果设备很小，音频风格将是 display: none;）：

//inside a component(for example AudioLarge.jsx)
const audioRef = useRef()

useEffect(() => {
   //if ref is ready, change the time
   if(audioRef.current) audioRef.current.currentTime = 50;
}, [])

return (
<>
   <audio src={source} ref={audioRef} />
</>
)

问题从这里开始。我想从 AudioSmall.jsx 组件中的 AudioLarge.jsx 访问 ref，其中 return 是小型设备的一些元素。我有一个解决方案。我可以将音乐参考存储在 redux 状态。但是可以吗？这是一个很好的解决方案吗？它会在未来造成问题吗？是否有更好的解决方案可以在全球范围内访问音乐参考？感谢您的帮助:)

Answer 1

是的，您可以将其存储在 redux store 中... 您可以将其存储在从上下文 api 到 redux

的任何状态管理系统中

但最好的方法是在 reducer 中声明对它的引用，并意味着通过在该 reducer 中的操作来更新其状态... 即它自己的减速器让你的代码整洁

//in your page

import { useRef } from 'react';
.......
const audioref = useRef(null);
<audio ref = {audioref} />

在代码中的某处，您通过操作将引用存储在商店中

<button onClick = {() => addAudioRef(audioref)}>play</button>

在你的减速器中

switch(state.action) {
   ....

   case 'audioref-added':
      return {...state, audioref : payload.audioref.current.play()}
   case 'audioref-stoped':
      return {...state, audioref : state.audioref.current.stop()}
   ....
}

以 redux 状态存储从 useRef 返回的对象

storing returned object from useRef in redux state

javascript

reactjs

redux

next.js