Redüktörde bir eylem gönderebilir miyim?

Question

Bir redüktörün kendisinde bir eylem göndermek mümkün mü? Bir ilerleme çubuğum ve bir ses elemanım var. Amaç, ses öğesinde zaman güncellendiğinde ilerleme çubuğunu güncellemektir. Ama ontimeupdate olay yerine yerleştiricisini nereye koyacağımı veya ilerleme çubuğunu güncellemek için, herhangi bir eylemin nasıl çalıştığını bilmiyorum. İşte benim kodudur:

//reducer 

const initialState = { 
    audioElement: new AudioElement('test.mp3'), 
    progress: 0.0 
} 

initialState.audioElement.audio.ontimeupdate =() => { 
    console.log('progress', initialState.audioElement.currentTime/initialState.audioElement.duration); 
    //how to dispatch 'SET_PROGRESS_VALUE' now? 
}; 


const audio = (state=initialState, action) => { 
    switch(action.type){ 
     case 'SET_PROGRESS_VALUE': 
      return Object.assign({}, state, {progress: action.progress}); 
     default: return state; 
    } 

} 

export default audio; 

Answer 1

bir redüktör içinde bir eylem Sevk bir anti-desen olduğunu. Redüktörünüz yan etki olmadan, sadece işlem yükünü sindirerek ve yeni bir durum nesnesini döndürerek olmalıdır. Dinleyicileri eklemek ve redüktör içinde eylemleri göndermek zincirleme eylemlere ve diğer yan etkilere yol açabilir.

Başlatılan AudioElement sınıfına benzer ve olay dinleyicisi, durumdan ziyade bir bileşenin içinde yer alır. Olay dinleyicisi içinde, progress durumunu güncelleyecek bir eylem gönderebilirsiniz.

AudioElement sınıf nesnesini yeni bir Yanıtla bileşeninde başlatabilir veya yalnızca bu sınıfı bir Yanıtlama bileşenine dönüştürebilirsiniz. updateProgressAction otomatik dispatch ile sarılmış olduğu

class MyAudioPlayer extends React.Component { 
    constructor(props) { 
    super(props); 

    this.player = new AudioElement('test.mp3'); 

    this.player.audio.ontimeupdate = this.updateProgress; 
    } 

    updateProgress() { 
    // Dispatch action to reducer with updated progress. 
    // You might want to actually send the current time and do the 
    // calculation from within the reducer. 
    this.props.updateProgress(); 
    } 

    render() { 
    // Render the audio player controls, progress bar, whatever else 
    return <p>Progress: {this.props.progress}</p>; 
    } 
} 

class MyContainer extends React.Component { 
    render() { 
    return <MyAudioPlayer updateProgress={this.props.updateProgress} /> 
    } 
} 

function mapStateToProps (state) { return {}; } 

return connect(mapStateToProps, { 
    updateProgressAction 
})(MyContainer); 

Not böylece doğrudan sevk aramaya gerek yoktur.

Answer 2

redux-saga gibi bir kitaplık kullanmayı deneyebilirsiniz. Zaman uyumsuzluk fonksiyonlarını sıralamak, eylemleri kapatmak, gecikmeleri kullanmak ve daha fazlası için çok temiz yol sağlar. Bu çok güçlü! Eğer redüktör başında alınan devlet artık zaman redüktör bitirir geçerli uygulama durumu olmayacak çünkü redüktör bitmeden başka sevkini başlayarak

Answer 3

, bir anti-desen olduğunu. Ancak redüktör içerisinden başka bir gönderim planlaması, bir anti-desen DEĞİLDİR. Aslında, Elm dilinin yaptığı şeydir ve bildiğiniz üzere, Redux, Elm mimarisini JavaScript'e getirme girişimidir.

Tüm işlemleriniz için asyncDispatch özelliğini ekleyeceğiniz bir katmanı burada bulabilirsiniz. Redüktörünüz yeni uygulama durumunu bitirdiğinde ve geri döndürdüğünde, asyncDispatchstore.dispatch'u ne şekilde harekete geçirirse onu tetikleyecektir.

// This middleware will just add the property "async dispatch" 
// to actions with the "async" propperty set to true 
const asyncDispatchMiddleware = store => next => action => { 
    let syncActivityFinished = false; 
    let actionQueue = []; 

    function flushQueue() { 
    actionQueue.forEach(a => store.dispatch(a)); // flush queue 
    actionQueue = []; 
    } 

    function asyncDispatch(asyncAction) { 
    actionQueue = actionQueue.concat([asyncAction]); 

    if (syncActivityFinished) { 
     flushQueue(); 
    } 
    } 

    const actionWithAsyncDispatch = 
    Object.assign({}, action, { asyncDispatch }); 

    next(actionWithAsyncDispatch); 
    syncActivityFinished = true; 
    flushQueue(); 
}; 

Şimdi redüktör bunu yapabilirsiniz:

`` AudioElement`` nedir

function reducer(state, action) { 
    switch (action.type) { 
    case "fetch-start": 
     fetch('wwww.example.com') 
     .then(r => r.json()) 
     .then(r => action.asyncDispatch({ type: "fetch-response", value: r })) 
     return state; 

    case "fetch-response": 
     return Object.assign({}, state, { whatever: action.value });; 
    } 
}