Reagieren Komponenten-Lebenszyklus, Zustand und redux

Question

Ich möchte redux verwenden, um den Zustand meiner ganzen react Anwendung zu speichern, aber ich mit einem bestimmten Fall stecken bin:

• was mit redux zu tun, wenn die Komponente Bedürfnissen ein lokaler Zustand, modifiziert durch Lebenszyklus-Methoden wie componentDidUpdate oder componentDidMount?

Beispiel einer Komponente reagieren „Karten“ von isotope Layoutbibliothek angeordnet zu enthalten:

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(); 
     } 
    } 
} 

Gibt es eine Möglichkeit, den lokalen Zustand in dieser Komponente zu entfernen und redux stattdessen zu verwenden? Ich kann nicht sehen, wie es geht

Answer 1

Setzen Sie Ihre items_list in Ihren Redux-Zustand. Ihr Minderer könnte wie folgt aussehen:

const initialState = { 
    items: [] 
}; 

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

Oder für etwas ein wenig komplexer:

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; 
} 

Sobald Sie Ihr Geschäft und Provider konfiguriert haben (siehe Redux docs), richten Sie Ihren „smart Komponente wie folgt:

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); 

Jetzt sind Ihre Elemente und Aktionen Requisiten für Ihre Root-Komponente. Wenn deine Gegenstände in einer Komponente niedrigerer Ordnung leben, gib sie einfach als Requisiten in den Baum.

Ich hoffe, dass Sie die allgemeine Idee gibt. Mit Redux finden Sie heraus, dass Ihre React-Komponenten viel weniger verbrauchen und viel mehr unterstützen.

Eine weitere Sache ...

Dies könnte eine Nebensache sein, aber ich fordere Dich nicht auf der Komponente Zustand Ihr Isotop Objekt zu speichern. (Unabhängig davon, ob Sie Redux verwenden oder nicht.) Das Isotop-Objekt ist nicht wirklich ein Stück Staat, es ist Ihre Sicht. In React wird eine Komponente als Reaktion auf eine Zustandsänderung aktualisiert. Aber Ihr componentDidUpdate macht das Gegenteil: Es ändert den Zustand als Reaktion auf ein Komponenten-Update.

Als Alternative speichern Sie es einfach auf dem Objekt selbst. das heißt

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(); 
    } 
} 

(Während normalerweise würde ich gegen empfehlen in diese Art von Instanzvariablen gegen die Verwendung von React, Bibliotheken DOM-Manipulation wie Isotopen sind eine würdige Ausnahme.)