reactjs - react - ¿con qué método del ciclo de vida podemos capturar errores en nuestros componentes?

Reaccionar componentes ciclo de vida, estado y redux

Question

Me gustaría usar redux para almacenar el estado de mi aplicación de reacción completa, sin embargo, estoy atascado con un caso particular:

• ¿Qué hacer con redux cuando el componente necesita un estado local, modificado por métodos de ciclo de vida como componentDidUpdate o componentDidMount ?

Ejemplo de un componente de reacción para contener "tarjetas" organizadas por la biblioteca de diseño de isótopos :

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

¿Hay alguna manera de eliminar el estado local en este componente y usar redux en su lugar? No puedo ver cómo hacerlo

Answer 1

Pon tus items_list en tu estado de reducción. Tu reductor podría verse así:

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 para algo un poco más complejo:

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 vez que haya configurado su tienda y proveedor (consulte los documentos de Redux), configure su "componente inteligente" de esta manera:

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

Ahora sus elementos y acciones son accesorios para su componente Root. Si sus artículos viven en un componente de orden inferior, simplemente páselos por el árbol como accesorios.

Espero que eso te dé la idea general. Con Redux, encontrará que los componentes de React utilizarán mucho menos y son mucho más.

Una cosa más...

Esto podría ser un asunto menor, pero le pido que NO almacene su objeto isótopo en el estado del componente. (Independientemente de si usa Redux o no). El objeto de isótopo no es realmente una pieza de estado, es su punto de vista. En React, un componente se actualiza en respuesta a un cambio de estado. Pero su componentDidUpdate hace lo contrario: cambia el estado en respuesta a una actualización de componente.

Como alternativa, simplemente guárdelo en el objeto mismo. es decir

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

(Aunque normalmente recomendaría no usar estas variables de instancia en React, las bibliotecas de manipulación de DOM como Isotopo son una excepción válida).