2015-11-24 46 views
8

Vorrei utilizzare redux per memorizzare lo stato di tutta la mia react applicazione, tuttavia io sono bloccato con un caso particolare:Reagire componenti del ciclo di vita, stato e redux

  • cosa fare con redux quando i bisogni dei componenti uno stato locale, modificato dai metodi del ciclo di vita come componentDidUpdate o componentDidMount?

Esempio di un componente di reagire per contenere "carte" organizzato dalla libreria isotope disposizione:

componentDidMount() { 
    let container = ReactDOM.findDOMNode(this); 
    if (! this.state.isotope) { 
     this.setState({ isotope: new Isotope(container, {itemSelector: '.grid-item', layoutMode: 'masonry'})}); 
    } 
} 

componentDidUpdate(new_props, new_state) { 
    if (new_state.items_list != this.state.items_list) { 
     if (this.state.isotope) { 
      this.state.isotope.reloadItems(); 
      this.state.isotope.layout(); 
      this.state.isotope.arrange(); 
     } 
    } 
} 

C'è un modo per rimuovere lo stato locale in questo componente e di utilizzare redux invece? Non riesco a vedere come si fa

+0

Come è il tuo items_list sempre popolata? –

+0

Ho una funzione che esegue un setState con items_list – mguijarr

risposta

15

Metti la tua items_list nel tuo stato redux. Il tuo riduttore potrebbe essere simile a questo:

const initialState = { 
    items: [] 
}; 

export function myReducer(state = initialState, action) { 
    switch (action.type) { 
     case 'SET_ITEMS': 
      return Object.assign({}, state, { 
       items: action.items 
      }); 
    } 
    return state; 
} 

O per qualcosa di un po 'più complessa:

const initialState = { 
    items: [] 
}; 

export function myReducer(state = initialState, action) { 
    switch (action.type) { 
     case 'ADD_ITEM': 
      return Object.assign({}, state, { 
       items: [ ...state.items, action.item ] 
      }); 
     case 'REMOVE_ITEM': 
      return Object.assign({}, state, { 
       items: [ 
        ...state.items.slice(0, action.index), 
        ...state.items.slice(action.index + 1) 
       ] 
      }); 
    } 
    return state; 
} 

Una volta che hai configurato il tuo negozio e provider (vedi la documentazione Redux), impostare il vostro "intelligente componente" in questo modo:

function mapStateToProps(state) { 
    return { 
     items: state.items 
    } 
} 

function mapDispatchToProps(dispatch) { 
    const actions = bindActionCreators(actionCreators, dispatch); 
    return { 
     addItem: actions.addItem, 
     removeItem: actions.removeItem 
    }; 
} 

export default connect(mapStateToProps, mapDispatchToProps)(Root); 

Ora i tuoi articoli e le azioni sono oggetti di scena per il componente principale. Se i tuoi oggetti vivono in un componente di ordine inferiore, devi semplicemente passarli nell'albero come oggetti di scena.

Spero che questo ti dia l'idea generale. Con Redux scoprirai che i componenti di React useranno molto meno e offriranno molto di più.

Ancora una cosa ...

Questa potrebbe essere una questione minore, ma vi esorto a non memorizzare il vostro oggetto isotopo sullo stato del componente. (Indipendentemente dal fatto che tu usi o meno Redux.) L'oggetto isotopo non è veramente un pezzo di stato, è la tua opinione. In React, un componente si aggiorna in risposta a un cambiamento di stato. Ma il tuo componentDidUpdate fa il contrario: cambia lo stato in risposta ad un aggiornamento del componente.

In alternativa, è sufficiente memorizzarlo sull'oggetto stesso. vale a dire

componentDidMount() { 
    const container = ReactDOM.findDOMNode(this); 
    this.isotope = new Isotope(container, { 
     itemSelector: '.grid-item', 
     layoutMode: 'masonry' 
    }); 
} 

componentDidUpdate(prevProps, prevState) { 
    if (prevProps.items !== this.props.items) { 
     this.isotope.reloadItems(); 
     this.isotope.layout(); 
     this.isotope.arrange(); 
    } 
} 

(Mentre di solito mi sento di raccomandare contro contro l'uso di queste specie di variabili di istanza in Reagire, DOM librerie di manipolazione come Isotope sono un'eccezione degna.)

+0

Grazie per il tuo consiglio in merito allo stato degli isotopi e dei componenti, in effetti è stato un errore archiviarlo nello stato. E grazie per la risposta in pratica ho applicato quello che hai detto e ne sono felice :) – mguijarr

Problemi correlati