redux supermodel

Redux-mannequin

Rationalisez les efforts nécessaires pour communiquer entre votre Redux Store et une API de type REST. Il s'agit d'un package de fonctions de création d'actions et de réducteurs construits avec axios et redux-promise-middleware qui gèrent la gestion de l'état des ressources pour vous... tout ce dont vous avez besoin est une URL !

Découvrez la démo

Référence API

Création du client

Les clients encapsulent l'API que vous utilisez. Vous pouvez créer un nouveau client en fournissant l'URL de base de l'API.

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

Créer des ressources

Au sein de votre client, vous pouvez commencer à définir des ressources. Chaque ressource représente un point de terminaison avec lequel vous pouvez interagir.

 // L'URL complète sera https://example.com/api/v1/blogsconst blogs = client('blogs')// https://example.com/api/v1/commentsconst comments = client('comments' )

Attacher les accessoires de votre ressource à votre composant

Commencez par la définition de votre ressource, supposons que http://example.com/api/posts/latest renvoie un objet JSON avec les propriétés title et body .

 // resources.jsimport { createClient } depuis 'redux-supermodel'const client = createClient('http://example.com/api')// OBTENEZ http://example.com/api/posts/latest/// / { title : "Mon dernier article de blog", body : "Bonjour tout le monde !" }export const post = client('post', { url: 'posts/latest' }) post.fetch()

Vous pouvez utiliser le composant d'ordre supérieur connect pour attacher votre état de ressource à votre composant et lier tous les créateurs d'action que vous souhaitez utiliser. La plupart du temps, vous récupérerez quelque chose lors du montage du composant. S'il s'agit du seul composant qui utilisera la ressource, vous pouvez la réinitialiser lors du démontage du composant. Habituellement, les créateurs d'actions create et update seront liés au bouton ou aux gestionnaires de soumission sur votre formulaire.

 // MyComponent.jsimport React, { Component } de 'react'import { connect } de 'react-redux'import { post } de './resources'export class MyComponent extends Component {
  async composantDidMount() { try { const res = wait this.props.fetchPost()
        // Les créateurs d'actions AJAX sont des promesses, vous pouvez donc les attendre pour // gérer les erreurs ou faire quelque chose une fois qu'elles sont terminées.  console.log(res)} catch (error) { // redux-supermodel suivra l'état de l'erreur pour vous, mais // vous pouvez également faire votre propre travail.  alert('Quelque chose de grave est arrivé !')}
  }

    // Si vous accédez uniquement à une ressource dans le contexte d'un seul composant et
  // ses enfants, vous pouvez réinitialiser la ressource lors du démontage pour nettoyer votre état redux.
  composantWillUnmount = () => this.props.resetPost()

  render() {const { initialisé, erreur, titre, corps, fetchPost } = this.propsif (!initialisé) { if (erreur) {return <div className="error">{error.message}</div> } else {return <div className="loading">Chargement...</div>
       }}return ( <div><h1>{title}</h1><div className="body"> {body}</div><div className="error"> {error.message}</div>< button type="button" onClick={fetchPost}>Actualiser</button> </div>)
  }}fonction d'exportation mapProps (état) {
  const { prêt, erreur, charge utile } = post (état)
  const { data : { titre, corps } = {} } = charge utile
  return { prêt, erreur, titre, corps }}const actions = {
   fetchPost : () => post.fetch({ id : 'latest' }),
  resetPost : post.reset,}exporter la connexion par défaut (mapProps, actions)(MyComponent)

La charge utile peut être un objet massif contenant de nombreuses informations sur la requête et la réponse HTTP, dont vous n'aurez pas besoin pour la plupart lors du rendu de votre composant. Je suggère donc d'utiliser l'appel mapProps pour simplifier la charge utile uniquement. des choses dont vous aurez besoin. Essayez d'éviter d'utiliser directement la charge utile. Consultez cet article de blog pour en savoir plus.

Pour plus de détails sur mapProps, lisez la documentation de réagir-redux connect().

Installation

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

Vous devrez ajouter le middleware redux-promise-middleware et le réducteur redux-supermodel à votre Redux Store.

 // store.jsimport { createStore, applyMiddleware, compose, combineReducers } de 'redux'import promiseMiddleware de 'redux-promise-middleware'import { réducteur en tant que ressource } de 'redux-supermodel'const rootReducer = combineReducers({ressource })export composition par défaut (applyMiddleware (promiseMiddleware ())) (createStore) (rootReducer)