在Redux中，我如何为两个能够改变相同状态的客户端呈现状态

Question

我的问题是我不知道如何更新我的redux应用程序的状态，其中2个用户能够编辑相同的状态。所以我有一个Redux ios应用程序，其中状态最初是:{isPlaying: False}

为两个客户端iphone。该应用程序只有一个播放歌曲按钮。当其中一个用户按下play时，歌曲开始在两个iphone上播放，当一个用户按下pause时，歌曲在两个iphone上暂停(我想要这个行为)。我通过向我的减速机发送一个动作来播放或暂停歌曲。

然后我有一个事件监听器在我的reducer更新状态，当我收到一个websocket消息的其他用户按下播放或暂停。

QUESTION因此，当user1按下play时，歌曲开始为user1和user2播放，然而render()功能仅为user1调用。我如何为user2调用render()函数?

Websocket Message Event Listener:

ws.onmessage = (e) => {
  // a message was received
  let message = JSON.parse(e.data);
  if (message.type === 'pause') {
    currentSong.pause(); // HOW DO I ALSO CALL COMPONENT RENDER() FUNCTION?
    console.log('pausing: server websocket message');
  } else if (message.type === 'play') {
    currentSong.setCurrentTime(message.currentTime);
    currentSong.play((success) => {
      if (success) {
        console.log('playing: server websocket message');
      } else {
        console.log('playback failed due to audio decoding errors');
      }
    });
  }
};

减速机功能:

export default function(state, action) {
    switch (action.type) {
        case CLICK_PLAY_PAUSE_BUTTON:
            let newState = cloneObject(state);
            newState.isPlaying = !state.isPlaying;
            if (newState.isPlaying) {
                currentSong.play(success => {
                    // Can't figure out why this callback never calls!
                    if (success) {
                        console.log('successfully finished playing: button pressed');
                    } else {
                        console.log('playback failed due to audio decoding errors');
                    }
                });
                currentSong.getCurrentTime(seconds => {
                    ws.send(JSON.stringify({ type: 'play', currentTime: seconds, name: userName }));
                });
            } else {
                currentSong.pause();
                currentSong.getCurrentTime(seconds => {
                    ws.send(JSON.stringify({ type: 'pause', currentTime: seconds, name: userName }));
                });
            }
            return newState;
        default:
            // if state is undefined return newState instead
            // of boolean
            return state || newState;
    }
};

Answer 1

我觉得你有一些东西不合适，这使问题更加复杂。就像@Phi Nguyen在评论中提到的，从reducer中删除异步的东西是要采取的第一步。

之后，您需要考虑play()和pause()方法发生了什么。我不知道他们是怎么回事，没有更多的代码很难告诉，但如果你打算让他们改变状态(如歌曲正在播放/暂停)，你应该调度/使用动作，之后你的减速器应该正确响应。