Redux mapStateToProps: Dispatch Aktion schließen Popup nach async Update

Question

I Zustand meiner Komponente als solche übergeben:

const mapStateToProps = (state, ownProps) => { 
    return { 
     pageState: state.pageState 
    } 
} 

Die pageState enthält Informationen über die ‚Seite‘, dh Seite Metadaten (wie Seitenname), und es empfängt auch die Methode, die verwendet wurde, wenn eine asynchrone CRUD-Operation die Seitendaten ("PUT") aktualisiert hat.

Die React-Komponente ist ein modales Fenster, das der Benutzer anruft, wenn er den Seitennamen aktualisieren und speichern möchte.
Die asynchrone PUT-Operation funktioniert gut und der PageState wird ordnungsgemäß aktualisiert (kein Problem hier), aber ich verstehe nicht, wo ich die Aktion "hideModal", die nach der Async-Aufruf ausgeführt werden soll.

Optionen sind:

1. mapStateToProps: hier prüfen, ob die pageState "PUT" enthält, dann die enge Aktion versenden;
2. Von der Rendermethode: aber dies wird abgeraten;
3. Von shouldComponentUpdate. Beim Testen stieß ich jedoch auf einen seltsamen Fehler. Die mapStateToProps scheint die this.props.pageState bei der ersten Anfrage nicht korrekt zu aktualisieren. Es funktioniert nur auf dem zweiten (?). Außerdem habe ich nicht das Gefühl, dass ich es hier irgendwie schreiben sollte; sollte nicht so aussehen

Mein Code der Komponente aus dem Behälter zu verbinden:

const renameModal = connect( 
    mapStateToProps, 
    mapDispatchToProps 
)(RenameModal); 

Jede Hilfe?

Für Info: Ich verwende Redux-Saga für den asynchronen Anruf. Dies sollte jedoch keine Rolle spielen. Aktualisierungen von Seiteninformationen können von verschiedenen Orten in meiner App aus erfolgen, und diese bestimmte Aktion (Schließen des Modals) sollte von der Implementierung getrennt bleiben, die sich um die Serveranforderungen kümmert.

Redux-Saga, hört für Asynchron-Update-Anfragen:

function* updatePage(action){ 
    try{ 
     const page = yield call(Api.updatePage, action.payload.siteSlug, action.payload.pageId, action.payload.page); 
     yield put({type: 'PUT_PAGE_SUCCEEDED', page}); 
    }catch(error){ 
     yield put({type: 'PUT_PAGE_FAILED', error}); 
    } 
} 

export function* watchUpdatePage(){ 
    yield* takeLatest('PUT_PAGE_REQ', updatePage); 
} 

Das Minderer:

const asyncReducer = (state = pageState, action) => { 
    switch(action.type){ 
     case 'GET_PAGE_SUCCEEDED': 
      console.log("get page succeeded"); 
      return Immutable.fromJS({ 
       type: "GET_PAGE_SUCCEEDED", 
       method: "GET", 
       pageState: action.page 
      }); 

     case 'PUT_PAGE_SUCCEEDED': 
      console.log("put page succeeded"); 
      return Immutable.fromJS({ 
       type: "PUT_PAGE_SUCCEEDED", 
       method: "PUT", 
       pageState: action.page 
      }); 

     default: 
      return state; 
    } 
} 

Answer 1

Aktionen in redux kann von mehreren Reduzierungen gehandhabt werden. Da Ihr Async-Aufruf den Aktionstyp PUT_PAGE_SUCCEEDED bereits beim Beenden des Aufrufs sendet (und PUT_PAGE_REQ davor), müssen Sie keine weitere Aktion versenden. Erstellen eines modalen Minderer wie folgt aus:

const modalReducer = (state = false, action) => { 
     case 'SHOW_MODAL': 
      return Immutable.fromJS({ 
       showModal: true 
      }); 
     case 'PUT_PAGE_SUCCEEDED': 
      return Immutable.fromJS({ 
       showModal: false 
      }); 

     default: 
      return state; 
    } 
} 

Und mapStateToProps entsprechend ändern:

const mapStateToProps = (state, ownProps) => { 
    return { 
     pageState: state.pageState, 
     modalState: state.modalState 
    } 
} 

btw - ich mit redux-Saga nicht wirklich vertraut bin, aber ich glaube, dass es von der einfachen nicht anders API-Middleware in der Art und Weise, in der Aktionen während des API-Aufruf-Lebenszyklus ausgelöst werden. Wenn es ist ....