Redux의 콜백을 통한 작업 디스패치

Question

나는 학습을 돕기 위해 Redux에 단계 시퀀서를 만드는 중입니다. 내가 필요로하는 것은 뮤지컬 타이밍을 제공하는 "진드기"로 작동하는 보편적 인 시계입니다. 그래서 Web Audio API 위에 구축 된 Tone.js 라이브러리를 사용할 계획이었습니다. function 다음있다 :

Tone.Transport.scheduleRepeat(function(time){ 
//do something with the time 
}, "8n"); 

당신은 매번 전송이 특정 위치에 도달 호출되는 콜백 함수를 제공합니다. 나의 순진한 접근 방식은 콜백이 내 저장소의 틱 수를 증가시키는 동작을 전달하도록하는 것이 었습니다. 이 작업은 일반 개체 여야하기 때문에 작동하지 않습니다. 이 기능을 사용할 수있는 가능성은 무엇입니까?

Redux의 기본적인 기본 원칙에 대한 올바른 이해를 얻고 자 노력 중이므로 어쨌든 그럴 수 있습니다. 미들웨어를 사용하여 콜백을 잡아 내고 실제로 호출했을 때이를 알려줍니다.

올바른 방향이 맞습니까? 이것이 어떻게 수행 될 수 있었는지 약간의 아이디어를 얻기 위해 살펴볼 수있는 라이브러리, 예제 또는 개념은 무엇입니까?

옳은 방향인가요? 아니면 다르게 접근해야합니까? 그렇다면 어떻게?

또는 Redux 앱에서 다른 구성 요소에 대한 글로벌 타이밍을 제공하는 가장 좋은 방법은 무엇입니까?

Answer 1

아주 재미있는 질문입니다. 저는 애완 동물 프로젝트입니다. 아직 태어나고 싶지만 아직 단일 LOC를 작성하지 않았습니다. :)

타이밍 부분에 대해서는 을 실행하고 페이로드로 시간이있는 경우마다 작업을 디스패치하는 <Clock /> 구성 요소도 사용할 수 있습니다.

그러나 까다로운 부분은 응용 프로그램의 전체적인 디자인입니다. Tone.js를 조금 연구했을 때, 오디오 부분을 영상과 분리해야한다는 것이 분명했습니다. 즉, Redux 상태는 단계 시퀀서를 나타내는 것에 만 관심을 가져야한다는 것을 의미합니다 (차선 목록 (채널/악기)을 시각화하고 오디오 로직을 외부에 보관해야 함).

각 단계는 자체가 "활성"인지 "비활성"인지를 정의하는 "단계"배열입니다.이 단계는 UI와 관련이 있습니다. 활성화 단계를 클릭하면 활동 작성자와 설정을 통해 상태가 수정되어야합니다

노래를 재생할 때 UI에서 강조 표시 할 수 있도록 현재 활성 "단계"를 진행하려면 해당 시계 틱을 보내야합니다.

는 여기 군침 도는 Codepen 아이디어 잡아 롤랜드 TR-808를 에뮬레이션 :

https://github.com/Tonejs/Tone.js/wiki/Performance#syncing-visuals : 오디오 및 UI를 동기화 중의 Tone.js 위키에서 관련 부분을

http://codepen.io/pixelass/details/adyLPR

을 그리고 여기에

미안하지만 더 이상 당신을 도울 수 없으며, 나보다 앞서 있고 이미 공유 할 수있는 작업 코드가 있습니다.

Answer 2

https://www.html5rocks.com/en/tutorials/audio/scheduling/에 대한 자세한 내용을 살펴 보았으나 간단히 말해서 음악 타이밍에 Javascript 콜백을 사용해서는 안됩니다. 충분히 정확하지 않습니다. 이것이 우리가 웹 오디오 스케줄링을하는 이유입니다.

Answer 3

기본적으로 cwilso가 올바르게 응답했습니다. 뮤지컬 타이밍을 위해 JS 함수를 예약하려는 경우 콜백을 사용하지 않아야합니다.

이 타이밍을 기반으로 구현하려는 Tone.js 기능이있는 경우 Redux를 피하고 콜백 함수 또는 Tone.Transport.schedule 함수 내에서이 Tone.js 함수를 직접 호출하십시오.

시퀀서를 만드는 경우 원하는 길이에 따라 Tone.Transport를 반복하고 타임 라인의 특정 지점에서 음표를 맞출 것을 권장합니다 (이것이 원하는 경우). 도움말 (http://tonejs.github.io/docs/#Transport)에 대한 문서의 loopStart 및 loopEnd를 확인하십시오. 이 도움이

function incrementTick() { 
    return { type: 'INCREMENT_TICK' } 
} 

// inside your component once the increment function has been connected 
Tone.Transport.scheduleRepeat((time) => { 
    this.props.incrementTick() 
}, "8n"); 

희망 :

이 기능은 당신이 돌아 오는 콜백을하려는 이유가 될 수 있습니다 시각적 참조, 필요한 경우

, 나는 당신이 그 다음을 수행하는 방법의 예를 제공 할 수 있습니다.

Answer 4

저는 오디오 관련 응용 프로그램을 제작 중이며 redux와 함께 웹 오디오 API 부분을 관리하는 문제에 직면 해 있습니다.

필자가 해결 한 방법은 redux 저장소 (일반 JS 개체, 데이터베이스에 저장하고 응용 프로그램을 초기화하는 데 사용하는 항목)에 오디오 상태의 표현 만 저장하는 것입니다. 이 저장된 정보는 UI를 렌더링하는 데 사용됩니다.

나는 저장소의 모든 변경 사항을 청취하는 서비스 '엔진'클래스를 가지고 있으며 여기에는 모든 웹 오디오 항목이 만들어지고 저장됩니다. 기본적으로 redux 저장소의 축소 기 사본을 포함하지만 웹 오디오 노드에 변경 내용을 적용합니다.

{type:"set-gain", payload:{trackid:3, value:0.7} } 

단순히 새로운 게인 값에 일반 JS 트랙 개체를 업데이트됩니다 REDUX 저장소, 엔진이 관련된 이득 노드를 찾을 수 있습니다 (또는 추가로 만듭니다 등 : 예를 들어

나는 액션을 파견) 값을 설정하십시오.

타이밍을 설정하기위한 작업을 디스패치하고 일반 JS 객체로 저장하는 redux 저장소에서 웹 오디오 예약을 사용하는 엔진 부분에 설정합니다.