私の問題は、2人のユーザーが同じ状態を編集できるreduxアプリケーションの状態を更新する方法がわかりません。だから私は状態が最初にあるReduxのiosアプリを持っている: {isPlaying:False}Reduxでは、同じ状態を変更できる2つのクライアントの状態をどのようにレンダリングするのですか?
2つのクライアントのiphone。アプリには再生曲のボタンが1つしかありません。ユーザーの1人がplay
を押すと、曲が両方のiphoneで再生を開始し、1人のユーザーがpause
を押すと、曲は両方のiphoneで一時停止します(この動作が必要です)。私は、私のレデューサーに当たるアクションを送って、そのソングを演奏したり一時停止したりして、これを行います。
次に、再生または一時停止を押している他のユーザーのwebsocketメッセージを受信したときに状態を更新するイベントリスナーがレデューサーの外にあります。
QUESTION
だから、ときuser1
プレスplay
曲がrender()
機能のみuser1
のために呼ばれしかしuser1
とuser2
のために再生を開始します。 user2
のrender()
機能をどのように呼び出すことができますか?
の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;
}
};
あなたのレデューサーには非同期機能を入れないでください。純粋なものでなければなりません。これらの非同期ロジックをアクションに動かす方が良いでしょう。 –