redux-Versprechen vs redux-Versprechen-Middleware

Question

I redux-Versprechen verwendet haben, aber es scheint, dass redux-Versprechen-Middleware mehr Funktionalität (dh Dispatching mehrere Aktionen mit "PENDING" oder "erfüllt" angehängt hat.

Warum sollte ich einen über den anderen benutzen?

Answer 1

ich persönlich redux-promise-middleware als Middleware gewählt als optimistisch Updates und Versendungen itenables anhängig ist, erfüllt und abgelehnt Aktionen und arbeitet gut mit mit redux-Thunk Kette async Aktionen.

Sie können Aktionen mit _PENDING und _FULFILLED i verwenden n dein Reduzierer und udpate die UI mit Fortschrittsbalken und ähnlichem.

Answer 2

Es gibt eine Alternative zu "redux-promise-middleware". redux-auto hat die gleiche API wie Redux-Versprechen-Middleware und kommt mit einer Reihe von Utility-Mustern unter der Haube, um den Standard zu reduzieren, den Sie schreiben müssen.

Die Idee ist, jeder action in a specific file zu haben. Ermitteln des Serveraufrufs in der Datei mit Reduziererfunktionen für "ausstehend", "erfüllt" und "abgelehnt". Das macht die Handhabung von Versprechungen sehr einfach.

Es verbindet auch automatisch eine helper object(called "async") an den Prototyp Ihres Staates, so dass Sie in Ihrer UI verfolgen, Requeste Übergänge.

Ein Beispiel

Daten/serverThing.js

export function pending (posts, payload){ 
    return posts 
} 

export function fulfilled (posts, payload, result){ 
    return result.serverResponse 
} 

export function rejected (posts, payload, error){ 
    return posts; 
} 

export function action (payload) { 
    return Promise.resolve({serverResponse: [1,2,3,4]}) 
} 

UI

import React from "react" 
import actions from 'redux-auto' 
import { connect } from 'react-redux' 

class Foobar extends Component { 

    const currentLoadingData = this.props.data.async.serverThing; 

    if(currentLoadingData instanceof Error){ 
    var data = currentLoadingData.message 
    } else if(true === currentLoadingData){ 
    var data = "Loading..." 
    } else { 
    var data = this.porps.data.join(); 
    } 

    render() { 
    return (
     <div> 
     <button onClick={()=>actions.data.serverThing()}>Do something!</button> 
     { data } 
     </div> 
    ) 
    } 
} 

const mapStateToProps = ({ data }) => { 
    return { data } 
}; 

export default connect(mapStateToProps)(Foobar); 

die obige Quelle zu verstehen. redux-auto erstellt automatisch Aktionen und verbindet diese abhängig von der Dateistruktur. Der Name des Ordners wird zum Namen der Eigenschaft für den Status. Die Dateien in einem Ordner sind Aktionen, die für diesen Teil des Status ausgeführt werden. Hier

ist ein komplettes redux-auto: helloworld project