redux supermodel

redux-supermodelo

Optimice el esfuerzo necesario para comunicarse entre su Redux Store y una API tipo REST. Este es un paquete de funciones de creación de acciones y reductores creados con axios y redux-promise-middleware que manejan la administración del estado de los recursos por usted... ¡todo lo que necesita es una URL!

Mira la demostración

Referencia de API

Creando el cliente

Los clientes encapsulan la API que estás consumiendo. Puede crear un nuevo cliente proporcionando la URL base de la API.

 importar {createClient} desde 'redux-supermodel'const client = createClient('https://example.com/api/v1')

Creando recursos

Dentro de su cliente, puede comenzar a definir recursos. Cada recurso representa un punto final con el que puede interactuar.

 // La URL completa será https://example.com/api/v1/blogsconst blogs = client('blogs')// https://example.com/api/v1/commentsconst comments = client('comments' )

Adjuntar los accesorios de su recurso a su componente

Comience con la definición de su recurso, supongamos que http://example.com/api/posts/latest devolverá un objeto JSON con propiedades title y body .

 // recursos.jsimport { createClient } de 'redux-supermodel'const client = createClient('http://example.com/api')// OBTENER http://example.com/api/posts/latest/// / { título: 'Mi última publicación de blog', cuerpo: '¡Hola mundo!' }exportar publicación constante = cliente('publicación', {url: 'publicaciones/últimas' }) post.fetch()

Puede utilizar el componente de orden superior connect para adjuntar el estado de su recurso a su componente y vincular cualquier creador de acciones que desee utilizar. La mayoría de las veces, buscará algo cuando se monte el componente. Si este es el único componente que utilizará el recurso, puede restablecerlo cuando el componente se desmonte. Por lo general, los creadores de acciones create y update estarán vinculados al botón o a los controladores de envío en su formulario.

 // MyComponent.jsimport React, { Component } from 'react'import { connect } from 'react-redux'import { post } from './resources'export class MyComponent extends Component {
  componente asíncronoDidMount() { intentar { const res = esperar this.props.fetchPost()
        // Los creadores de acciones AJAX son promesas, por lo que puedes esperar a que // manejen los errores o hagan algo después de que terminen.  console.log(res)} catch (error) { // redux-supermodel rastreará el estado del error por ti, pero // también puedes hacer lo tuyo.  alert('¡Algo malo pasó!')}
  }

    // Si solo accede a un recurso dentro del contexto de un único componente y
  // sus hijos, puede restablecer el recurso al desmontarlo para limpiar su estado redux.
  componenteWillUnmount = () => this.props.resetPost()

  render() {const { inicializado, error, título, cuerpo, fetchPost } = this.propsif (!initialized) { if (error) {return <div className="error">{error.message}</div> } else {return <div className="cargando">Cargando...</div>
       }}return ( <div><h1>{title}</h1><div className="body"> {body}</div><div className="error"> {error.message}</div>< tipo de botón="botón" onClick={fetchPost}>Actualizar</button> </div>)
  }}función de exportación mapProps (estado) {
  const {listo, error, carga útil} = publicación (estado)
  const {datos: {título, cuerpo} = {}} = carga útil
  return {listo, error, título, cuerpo }}acciones constantes = {
   fetchPost: () => post.fetch({ id: 'último' }),
  resetPost: post.reset,}exportar conexión predeterminada (mapProps, acciones) (MyComponent)

La carga útil puede ser un objeto masivo que contiene mucha información sobre la solicitud y respuesta HTTP, la mayor parte de la cual no necesitará cuando renderice su componente, por lo que sugiero usar la llamada mapProps para simplificar la carga útil solo al cosas que vas a necesitar. Intente evitar el uso de la carga útil directamente. Consulte esta publicación de blog para leer más.

Para obtener detalles sobre mapProps, lea la documentación de react-redux connect().

Instalación

npm install --save redux-supermodel redux-promise-middleware

Deberá agregar el middleware redux-promise-middleware y el reductor redux-supermodel a su Tienda Redux.

 // store.jsimport { createStore, applyMiddleware, compose, combineReducers } de 'redux'importar promesaMiddleware de 'redux-promise-middleware'import { reductor como recurso } de 'redux-supermodel'const rootReducer = combineReducers({ recurso })exportar redacción predeterminada (applyMiddleware (promiseMiddleware ())) (createStore) (rootReducer)