redux supermodel

Redux-Supermodel

Optimieren Sie den Aufwand für die Kommunikation zwischen Ihrem Redux Store und einer REST-ähnlichen API. Dies ist ein Paket von Action-Creator-Funktionen und -Reduzierern, die mit Axios und Redux-Promise-Middleware erstellt wurden und die Verwaltung des Ressourcenstatus für Sie übernehmen ... Sie benötigen lediglich eine URL!

Schauen Sie sich die Demo an

API-Referenz

Erstellen des Clients

Clients kapseln die von Ihnen genutzte API. Sie können einen neuen Client erstellen, indem Sie die Basis-URL für die API angeben.

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

Ressourcen erstellen

In Ihrem Client können Sie mit der Definition von Ressourcen beginnen. Jede Ressource stellt einen Endpunkt dar, mit dem Sie interagieren können.

 // Die vollständige URL lautet https://example.com/api/v1/blogsconst blogs = client('blogs')// https://example.com/api/v1/commentsconst comments = client('comments' )

Anhängen der Requisiten Ihrer Ressource an Ihre Komponente

Beginnen Sie mit Ihrer Ressourcendefinition. Nehmen wir an, http://example.com/api/posts/latest gibt ein JSON-Objekt mit den Eigenschaften title und body zurück.

 // resources.jsimport { createClient } from 'redux-supermodel'const client = createClient('http://example.com/api')// GET http://example.com/api/posts/latest/// / { title: 'Mein neuster Blog-Beitrag', body: 'Hallo Welt!' }export const post = client('post', { url: 'posts/latest' }) post.fetch()

Mit connect Higher-Order Component“ können Sie Ihren Ressourcenstatus an Ihre Komponente anhängen und alle Aktionsersteller binden, die Sie verwenden möchten. Meistens holen Sie etwas ab, wenn die Komponente bereitgestellt wird. Wenn dies die einzige Komponente ist, die die Ressource nutzt, können Sie sie zurücksetzen, wenn die Bereitstellung der Komponente aufgehoben wird. Normalerweise sind Ersteller create und update an die Schaltfläche oder die Submit-Handler in Ihrem Formular gebunden.

 // MyComponent.jsimport React, { Component } from 'react'import { connect } from 'react-redux'import { post } from './resources'export class MyComponent erweitert Component {
  async ComponentDidMount() { try { const res = waiting this.props.fetchPost()
        // AJAX-Aktionsersteller sind Versprechen, sodass Sie darauf warten können, // Fehler zu behandeln oder etwas zu tun, nachdem sie abgeschlossen sind.  console.log(res)} Catch (error) { // redux-supermodel verfolgt den Fehlerstatus für Sie, aber // Sie können auch Ihr eigenes Ding machen.  alarm('Etwas Schlimmes ist passiert!')}
  }

    // Wenn Sie immer nur im Kontext einer einzelnen Komponente auf eine Ressource zugreifen und
  // seine Kinder, Sie können die Ressource beim Unmounten zurücksetzen, um Ihren Redux-Status zu bereinigen.
  ComponentWillUnmount = () => this.props.resetPost()

  render() {const { initialized, error, title, body, fetchPost } = this.propsif (!initialized) { if (error) {return <div className="error">{error.message}</div> } else {return <div className="loading">Laden...</div>
       }}return ( <div><h1>{title}</h1><div className="body"> {body}</div><div className="error"> {error.message}</div>< button type="button" onClick={fetchPost}>Aktualisieren</button> </div>)
  }}Exportfunktion mapProps (Zustand) {
  const { bereit, Fehler, Nutzlast } = post(state)
  const { data: { title, body } = {} } = Nutzlast
  return { ready, error, title, body }}const actions = {
   fetchPost: () => post.fetch({ id: 'latest' }),
  resetPost: post.reset,}export default connect(mapProps, actions)(MyComponent)

Die Nutzlast kann ein riesiges Objekt sein, das zahlreiche Informationen über die HTTP-Anfrage und -Antwort enthält, von denen Sie die meisten beim Rendern Ihrer Komponente nicht benötigen. Daher empfehle ich die Verwendung des mapProps Aufrufs, um die Nutzlast auf nur die zu vereinfachen Dinge, die Sie brauchen werden. Versuchen Sie, die direkte Nutzung der Nutzlast zu vermeiden. Weitere Informationen finden Sie in diesem Blogbeitrag.

Weitere Informationen zu MapProps finden Sie in der Dokumentation zu React-Redux Connect().

Installation

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

Sie müssen die Middleware redux-promise-middleware und den redux-supermodel Reducer zu Ihrem Redux Store hinzufügen.

 // store.jsimport { createStore, applyMiddleware, compose, combinReducers } from 'redux'import PromiseMiddleware from 'redux-promise-middleware'import { Reducer as Resource } from 'redux-supermodel'const rootReducer = CombineReducers({ Resource })export Standard compose(applyMiddleware(promiseMiddleware()))(createStore)(rootReducer)