actions - Hacer llamadas api desde componentes tontos con Redux

redux thunk

Question

Quiero implementar el menú desplegable con reaccionar y reducir. El menú desplegable formará parte de otro componente, por lo que es realmente un componente "tonto". Pero el menú desplegable debe llamar a la API para buscar elementos, aplicar filtros personalizados, etc. Las llamadas a Api deben autenticarse, los tokens lo almacenan en estado global. ¿Debo pasar tokens a accesorios de componentes? O hay una mejor manera de hacer esto?

Answer 1

El componente tonto no significa que pueda hacer algo como traer actualizaciones, significa que es ''tonto'' para el concepto de redux, y no sabe nada sobre su tienda o qué biblioteca está usando. El beneficio es que puede cambiar su implementación de flujo y solo tiene un poco de trabajo para actualizar los componentes inteligentes.

Para el tipo de escenario que está describiendo, le daría a su <Menu> una función a través de accesorios que se ejecutarían cuando <Menu> desee actualizar los datos. <Menu> no sabe nada sobre Redux, solo está ejecutando una función, pero aún puede obtener datos nuevos. Dependiendo de las complejidades, podría pasar por el creador de acciones sin procesar (vinculado a dispatchAction) y ejecutarlo.

import * as dataActions from ''./actions'';
// We have dataActions.fetchItems() which is the action creater to get new items.

// Attach items, and the action creator (bound to dispatch) to props
@connect((store) => {
    return {items: store.data.items}
}, dataActions)
class ItemsPage extends Component {
    static propTypes = {
        items: PropTypes.object, // the items from the store, from @connect
        fetchItems: PropTypes.func // action dispatcher, from @connect
    }

    render() {
        return (<Menu onChange={this.props.fetchItems} /> )
    }
}

// Our ''dumb'' component that doesnt know anything about Redux,
// but is still able to update data (via its smart parent)
class Menu extends Component {
    static propTypes = {
        onChange: PropTypes.func // same as fetchItems
    }

    render() {
        return (<button onClick={this.props.onChange}>Update items</button>);
    }
}

Answer 2

Un componente tonto, por definición, debe ser tonto: significa que debe tomar todo lo que necesita "desde la parte superior", es decir, a través de los accesorios.

Solo un Componente "Inteligente" ("conectado" a Redux), arriba de la jerarquía, se ocuparía de obtener los datos usando una nueva Acción (asíncrona), que luego modificaría el estado cuando regrese la llamada API, lo que volvería a renderizar su Componente tonto con sus nuevos accesorios.

Entonces en Redux:

• Su componente tonto tiene dos accesorios: uno con los valores que provienen de su API (que en realidad son parte de su "estado"), y el otro una función que se llama cuando cambia su elemento seleccionado. <MyDumbComponent data={this.props.data} onChange={this.onChange.bind(this)} />
• Luego, un componente "inteligente" en la jerarquía escuchará esa función onChange y enviará una Acción (FETCH_DATA)
• La acción (asíncrona) llamará a la API, y cuando reciba los datos, llame a otra Acción (FETCH_DATA_SUCCESS) con los datos
• Entonces Redux, con un reductor, actualizaría su estado de la carga de Acción
• Lo cual volverá a renderizar su Componente con sus nuevos apoyos (datos nuevos), provenientes del estado actual.

Es posible que desee leer esto: http://redux.js.org/docs/basics/UsageWithReact.html

Y con respecto a las acciones asíncronas: http://redux.js.org/docs/advanced/AsyncActions.html