2016-09-10 9 views
1

私の問題は、2人のユーザーが同じ状態を編集できるreduxアプリケーションの状態を更新する方法がわかりません。だから私は状態が最初にあるReduxのiosアプリを持っている: {isPlaying:False}Reduxでは、同じ状態を変更できる2つのクライアントの状態をどのようにレンダリングするのですか?

2つのクライアントのiphone。アプリには再生曲のボタンが1つしかありません。ユーザーの1人がplayを押すと、曲が両方のiphoneで再生を開始し、1人のユーザーがpauseを押すと、曲は両方のiphoneで一時停止します(この動作が必要です)。私は、私のレデューサーに当たるアクションを送って、そのソングを演奏したり一時停止したりして、これを行います。

次に、再生または一時停止を押している他のユーザーのwebsocketメッセージを受信したときに状態を更新するイベントリスナーがレデューサーの外にあります。

QUESTIONだから、ときuser1プレスplay曲がrender()機能のみuser1のために呼ばれしかしuser1user2のために再生を開始します。 user2render()機能をどのように呼び出すことができますか?

のWebSocketメッセージイベントリスナー:

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; 
    } 
}; 
+0

あなたのレデューサーには非同期機能を入れないでください。純粋なものでなければなりません。これらの非同期ロジックをアクションに動かす方が良いでしょう。 –

答えて

0

あなたは問題が配合された場所のうちいくつかのものを持っているような気がします。 @Phi Nguyenのコメントのように、減速機からの非同期のものを取り除くのが最初のステップです。

その後、play()pause()の方法で何が起こっているのかを検討する必要があります。私は彼らと一緒に何が起こっているのか分かりません。コードなしで話すのは難しいですが、あなたが状態を変更しようとしている場合(演奏中/一時停止中の曲など)、アクションをディスパッチ/使用する必要があります。あなたのレデューサーは礼儀正しく応答します。