Rimozione di elementi dall'elenco redux-memorizzati e reindirizzamento verso l'elenco - ritardare la valutazione degli oggetti di scena?

Question

Sto visualizzando con l'elenco dei passaggi. Ogni passaggio può essere "visualizzato" e "rimosso" dalla schermata "visualizza". mio componente StepDetails lega al negozio redux da andare a prendere passo corrispondente dal steps parte del negozio con semplice steps.find(...):

const mapStateToProps = (state, ownProps) => { 
    let stepId = ownProps.params.stepId; 
    let step = state.steps.find(s => s.id === stepId); 
    return {step}; 
}; 

Ora, quando (dal di dentro "dettagli") mi ha colpito "Elimina punto" Voglio che questo passaggio da rimuovere dal negozio e voglio passare alla visualizzazione elenco.

C'è azione redux invocata su di eliminazione che restituisce la lista nuovi passi senza questo quello rimosso e reindirizzare viene chiamato in seguito:

const deleteStep = (stepId) => { 
    return dispatch => { 
    return stepsApi.deleteStep(stepId).then(steps => { 
     dispatch(action(STEPS_LIST_CHANGED, {steps})); 
     // react-router-redux action to redirect 
     dispatch(redirectToList()); 
    }) 
    } 
}; 

Questo va bene e fa quello che voglio, con uno svantaggio: quando STEPS_LIST_CHANGED azione è chiamato e passo viene rimosso dalla lista, mapStateToProps del mio componente viene chiamato prima di questo reindirizzamento. Il risultato è che mapStateToProps non può ovviamente trovare questo passaggio e il mio componente mi dà errori che il passo non è definito ecc.

Quello che posso fare è controllare se il passaggio fornito al componente è definito, e se non renderizzare nulla ecc. Ma è tipo di impostazione di programmazione difensiva non mi piace molto, in quanto non voglio che il mio componente sappia cosa fare se riceve dati errati.

Posso anche scambiare azioni, ordine di spedizione: reindirizzare prima e poi modificare lo stato, ma poi non sembra corretto (logicamente prima vuoi eliminare e poi reindirizzare).

Come gestisci questi casi?

EDIT: Quello che ho finito con era di mettere questa null/undefined-check nel componente contenitore (uno che fa il cablaggio redux). Con questo approccio non confondo le mie componenti di presentazione con una logica inutile. Può anche essere sottratto al componente di ordine superiore (probabilmente il decoratore ES7) per il rendering di null o <div></div> quando alcuni oggetti di scena richiesti non sono presenti.

Answer 1

Mi vengono in mente due approcci:

• Delega l'elenco modificato al reindirizzamento? Per esempio:

  dispatch(redirectToList(action(STEPS_LIST_CHANGED, {steps}))); 
  

• Gestione della componente passo nulla di ignorare il rendering:

  shouldComponentUpdate: function() { 
      return this.state.steps != null; 
  } 
  

Answer 2

È possibile modificare la sua dichiarazione di ritorno in un array

const mapStateToProps = (state, ownProps) => { 
    let stepId = ownProps.params.stepId; 
    let step = state.steps.find(s => s.id === stepId); 
    return step ? [{step}] : [] 
}; 

In questo modo sul tuo componente puoi fare un step.map() e renderlo.