Redux: Beispiele aus der realen Welt (einschließlich CRUD, erweiterte Muster usw.)

Erstellt am 2. Feb. 2016  ·  45Kommentare  ·  Quelle: reduxjs/redux

Ursprünglich inspiriert von Dans Tweet .

TL;DR - Wir würden gerne die Erstellung/Codeüberprüfung/Pädagogik einer vollwertigen Redux-App finanzieren, die reale Anwendungsfälle abdeckt, die in diesem Repository sowie in einem

Das Schreiben umfangreicher Beispiele nimmt viel Zeit in Anspruch und erfordert schreibbare API-Endpunkte (unter anderem). Es ist jedoch etwas, das meiner Meinung nach sehr wichtig ist, um sicherzustellen, dass Entwickler beim Erstellen ihrer Anwendungen einen guten Referenzrahmen haben. Wir haben auch eine Menge unserer Benutzer, die nach dieser Art von Einführung in Redux fragen, und als solche freuen wir uns, ihre Erstellung zu finanzieren.

Ich würde gerne Ihre Ideen dazu hören und lmk, wenn Sie daran interessiert sind, daran zu arbeiten!

examples

Hilfreichster Kommentar

Ich hätte gerne ein offizielles CRUD-Beispiel, das Folgendes behandelt:

  • Authentifizierung
  • Normalisierung
  • Optimistische Updates
  • Lokale Bearbeitung
  • Entitätsbeziehungen
  • Seitennummerierung

Wenn Sie einen Kurs darauf aufbauen möchten, ist das erstaunlich. Ich denke jedoch, dass es wichtig ist, dass das Beispiel selbst zu diesem Repository beiträgt, damit wir es pflegen und mit den neuesten Änderungen auf dem neuesten Stand halten können. Daher sollte es mit dem Build-System und den Konventionen übereinstimmen, die wir in den vorhandenen Beispielen verwenden.

Macht das Sinn?

Alle 45 Kommentare

Ich hätte gerne ein offizielles CRUD-Beispiel, das Folgendes behandelt:

  • Authentifizierung
  • Normalisierung
  • Optimistische Updates
  • Lokale Bearbeitung
  • Entitätsbeziehungen
  • Seitennummerierung

Wenn Sie einen Kurs darauf aufbauen möchten, ist das erstaunlich. Ich denke jedoch, dass es wichtig ist, dass das Beispiel selbst zu diesem Repository beiträgt, damit wir es pflegen und mit den neuesten Änderungen auf dem neuesten Stand halten können. Daher sollte es mit dem Build-System und den Konventionen übereinstimmen, die wir in den vorhandenen Beispielen verwenden.

Macht das Sinn?

Ich würde auch gerne sehen, wo die Leute Daten von APIs abrufen.

@gaearon der Inhalt/Code wird Open Source sein, das ist also kein Problem. Wir würden nur um einen Link zurück zu uns irgendwo auf der Seite bitten :) (Bearbeiten - die Verwendung bestehender Build-Systeme / Konventionen ist auch für uns vorzuziehen)

@sebastiandeutsch kannst du das etwas

Vor einiger Zeit habe ich angefangen, mit dem Schreiben eines Passwort-Managers mit Monogram und eccrypto herumzuspielen . Speichern Sie Passwörter und teilen Sie sie alle, ohne sie jemals in unverschlüsselter Form mit ECIES über das Internet zu senden. Ich bin nie ganz dazu gekommen, es wirklich fertigzustellen, aber es könnte sehr gut alle Punkte in https://github.com/rackt/redux/issues/1353#issuecomment -178760036 erfüllen. Klingt das interessant?

@vkarpov15

Das klingt sehr interessant, aber ich fürchte, es ist ein wenig zu domänenspezifisch. Die meisten Leute werden ein allgemeines CRUD-Beispiel sehen wollen (Listen von bearbeitbaren Elementen, die mit einem der Elemente verlinkt werden können usw.), und ich fürchte, ein Krypto-Fokus könnte das Beispiel weniger zugänglich machen.

Ich interessiere mich sehr für lokale/offline-Bearbeitung mit optimistischen Updates, ich habe etwas Zeit, bin aber mit Redux-Apps nicht so erfahren, ich habe nur eine komplexe native App, aber fast vollständig lokal/offline.
Vielleicht könnten wir ein Repo schreiben und daran arbeiten und inkrementell diskutieren?
Und was ist mit "modularen" Apps?
Nur um einige Ideen zu teilen, habe ich einige Ideen dazu aufgeschrieben, wie meiner Meinung nach die erste Offline-App sein sollte. Probieren Sie es aus, wenn Sie Zeit haben, damit zu verbringen! :)

https://github.com/jsforum/jsforum/issues/7

Ich bin mir nicht sicher, wie weit verbreitet das Problem ist und was die Zielebene der Entwickler für diesen Kurs ist, aber ich würde gerne irgendwo im Netz sehen, wie man komplexe App-Komponenten entwickelt, die in React+Redux implementiert sind (wie ein mehrstufiges Formular oder ein Wizard mit Zustand, der von mehreren Reduzierern gesteuert wird), sodass sie als Ganzes in einer anderen App wiederverwendbar sind.

@sompylasar Bitte

Wenn Sie nach einem Crud-Beispiel für Anfänger suchen, gibt es immer todo-mvc und die Armee von Tutorials zum Thema "Erste Schritte mit babel+redux+react+webpack". Ich bin mir nicht sicher, ob ein weiteres noch viel Wert hat, ich lese jede Woche ein paar neue Blog-Posts zu diesem Thema (aber vielleicht könnten Sie eine App erstellen, die diese Tutorials automatisch generiert? :p ). Ich würde argumentieren, dass ein Tutorial auf mittlerem Niveau lohnenswerter wäre, und das Erlernen von IMO über Krypto könnte ein verlockender Nebenvorteil sein.

Ich suche kein Beispiel für Anfänger, aber die komplexen Teile von CRUD (Paginierung, Normalisierung, optimistische Updates, Beziehungen) sollten im Mittelpunkt des Beispiels stehen.

Würde dies eine benutzerdefinierte oder eine vorhandene API verbrauchen? Oder Kombination?

Das ist die schwierige Frage. Ich weiß nicht. Die Github-API kann eine gute Idee sein, da sie beschreibbar ist und die Konzepte jedem bekannt sind. Ich weiß, dass @ryanflorence an etwas Ähnlichem gearbeitet hat.

Damit zielen Sie auf jeden Fall auf fortgeschrittene Entwickler ab; die Anfänger-Tuts sind gesättigt und behandeln selten die (realen) schwierigeren Themen, die Dan oben aufgelistet hat.

Ich bin offen für benutzerdefinierte und/oder vorhandene APIs – wir hosten gerne alle benutzerdefinierten APIs in unserem aws-Konto. Wir haben auch eine ausgewachsene API für einen Medium.com-Klon, die wir für einige andere Kurse aufbauen, die wir verwenden könnten. Backend-Quellcode wäre auch dafür verfügbar, falls die Leute neugierig sind. Gerne Details, wenn das interessant klingt.

@EricSimons Ich würde gerne mehr über den Medium-Klon erfahren.

@cshenoy Auf

  • Authentifizierung (E-Mail/Pass & oAuth, JWT)
  • CRUD für Blogposts & Kommentare zu Blogposts
  • Benutzern folgen
  • Globaler Feed aller Blogs & ein Feed der Blogs der Benutzer, denen du folgst
  • Tagging-System
  • Benutzerprofile/Profilinfo bearbeiten

Die ETA zur endgültigen Codebasis ist Ende dieser Woche, also werde ich dann weitere Informationen haben. Wir haben alles so konzipiert, dass es supermodular ist, daher wäre das Hinzufügen zusätzlicher Funktionen trivial.

Timesheets (Time Tracker) üben wirklich viele komplexe Aspekte von Flux/Redux und Crud aus. Paginierung und Zwischenspeicherung sind offensichtliche Anforderungen, wenn Sie durch Tage und Wochen hin und her scrollen. Es gibt auch bereits viele beschreibbare APIs. Es gibt viel mehr als nur die Zeiterfassung. Benutzerverwaltung, Projekteinheiten etc.

Ich denke, das wäre großartig. Ich habe ein bisschen damit gekämpft, vor allem mit dem Erstellen. Angenommen, Sie haben eine ArticlePage-Komponente, die neue Artikel wie folgt erstellt:

// shortened version

import { addArticle } from '../actions'

function doAddArticle(props, handleAdded, values, dispatch) {
  props.addArticle(values)
  .then(handleAdded)
}

class AddArticlePage extends Component {
  handleAdded = () => {
    this.props.pushState(null, '/articles/')
  };

  render() {
    return (
      <div>
        <ArticleForm submit={(values, dispatch) => doAddArticle(this.props, this.handleAdded, values, dispatch)} />
      </div>
    )
  }
}

function mapStateToProps(state) {
  return {}
}

export default connect(mapStateToProps, {
  pushState,
  addArticle
})(AddArticlePage)

  1. Ich bin mir nicht einmal sicher, ob es das "richtige" ist, das gelöste Versprechen, die Umleitung durchzuführen, zu verketten.
  2. Was ist, wenn ich die ID aus dem neu erstellten Artikel abrufen möchte und anstatt auf die Indexseite umzuleiten, möchte ich auf die Seite /articles/{id}/ umleiten?
  3. Was ist, wenn meine Komponente das Ergebnis der asynchronen Aktion möchte? Bei mir kam dies in meiner ArticleForm-Komponente mit einem Formularfeld zum Hochladen von Bildern: Ich sende eine Aktion "addImage" und wenn das Bild geladen ist, möchte ich 1) eine Vorschau des hochgeladenen Bildes basierend auf der URL anzeigen und 2) möchte Weisen Sie dem Formular die URL zu. Aber es fiel mir schwer herauszufinden, wie dies in Redux am besten funktioniert. Das Problem, das ich gefunden habe, war, dass Sie in der Lage sein müssen, den neu hinzugefügten Zustand / das neu hinzugefügte Bild einer Requisite in der Formularkomponente zuzuordnen, aber 1) wie erhalten Sie das neu hinzugefügte Bild und 2) was, wenn 2 Bilder gleichzeitig hochgeladen werden, wie? Bekommen Sie die richtige Bild-URL für die richtige Komponente?

Zugegeben, ich reduxe erst seit ein paar Monaten, also sind das vielleicht dumme Dinge, aber als Anfänger haben sie mich definitiv zum Stolpern gebracht und ich habe immer noch nicht das Gefühl, dass meine Lösungen der "richtige Weg" sind.

@jonathaningram hast du dir redux-thunk überhaupt angesehen? Als Alternative zu dem, was Sie oben tun, können Sie innerhalb Ihrer Aktion versenden

@babsonmatt ja, ich benutze es bereits. Ich habe die App auf dem realen Beispiel basiert, das sie verwendet. Vielleicht nutze ich es aber nicht in vollem Umfang.

@jonathaningram Danke für dein Beispiel. Wie bereits erwähnt, sollten Sie die Umleitungslogik in den Thunk des Aktionserstellers verschieben und die Routenaktualisierung von dort aus versenden. Es gibt mehr Möglichkeiten, Nebenwirkungen zu verwalten (die Umleitung ist eine Nebenwirkung des durch diese Aktion verursachten Zustandsübergangs), wie Redux-Saga oder Redux-Nebenwirkungen. Aber ich denke, die eingehende Diskussion ist außerhalb des Rahmens dieses Themas.

@sompylasar danke. Ja, ich möchte das Thema nicht ablenken, sondern nur meine Erfahrungen aus der "realen Welt" als Redux-Anfänger teilen, was hoffentlich den neuen Beispielen hilft, die sich aus diesem Problem ergeben.

@EricSimons Ich bin daran interessiert zu helfen. Ich betreue derzeit eine CRUD-App mit Nuklear-js und denke, dass viele ihrer Ideen gut in Redux übersetzt werden könnten. Lassen Sie es mich wissen, wenn Sie ein Brainstorming durchführen möchten.

Ich habe vor kurzem ein Projekt für CRUD (over REST) ​​State Management gestartet. Von Marionette/Backbone ich die REST-Konventionen wirklich vermisst, als ich anfing, auf React/Redux zu graben.

https://github.com/masylum/resting-ducks

Ich bin mir nicht sicher, ob die Lösung Beispiele sind. Ich denke, dass Bibliotheken dafür besser geeignet sind. Das Zustandsmanagement ist fast immer gleich, 2016 sollten wir keinen CRUD-Code schreiben, sondern uns auf unsere Geschäftslogik konzentrieren.

@EricSimons Ich evaluiere derzeit verschiedene Optionen, wo der abgerufen werden sollen. Eine Möglichkeit wäre, etwas Relayish zu implementieren - aber ich habe das Gefühl, dass das ein bisschen übertrieben ist. Etwas, das ich für ein Projekt nachgeholt habe, besteht darin, meine Ladeanforderungen in den Routen mit einem Loader-Attribut anzugeben:

let routes = <Route path='/' component={Layout}>
  <IndexRoute component={BooksIndex} />
  <Route path='/book/new' component={BooksNew} />
  <Route path='/book/:id' component={BooksShow} loader={BooksLoader} />
  <Route path='/book/:id/edit' component={BooksEdit} loader={BooksLoader} />
</Route>;

Der BooksLoader ist eine Klasse, die zwei Funktionen implementiert:

  • needToSyncStore(params, store) gibt true zurück, wenn der Store synchronisiert werden muss, andernfalls false
  • syncStore(params, store) synchronisiert den Store und gibt ein Versprechen zurück

Hier ist eine sehr einfache Beispielimplementierung, die definitiv durch etwas Intelligenteres ersetzt werden kann (zB ImmutableJS / Map):

import _ from 'lodash';
import * as Actions from 'actions';
import API from 'api';

export default class BooksLoader {
  needsToSyncStore(params, store) {
    let books = store.getState().books;

    if(books) {
      const book = _.findWhere(books.collection, { isbn: params.id });
      if(book) {
        return false;
      }
    }

    return true;
  }

  syncStore(params, store) {
    let { dispatch } = store;
    let api = new API();

    let loadBooks = Actions.loadBooks();
    return loadBooks(dispatch, store.getState);
  };
}

Die Idee ist, dass sich ein Loader nur um den Zustand kümmert, der von einer Route und dem Redux-Zustandsbaum bereitgestellt wird, was das Testen erleichtert.

Das nächste Stück ist ein Store Loader, eine React- Komponente, die stark von https://gist.github. com/sebastiandeutsch/e6148ca0741cc355248c

Es überprüft die Routen von ReactRouter auf Lader und führt diese aus. Es macht auch den Ladezustand über Kontexte verfügbar. In Aktion würde das so aussehen:

<Provider store={store}>
  <Router
    history={browserHistory}
    render={(props) => (
      <StoreLoader {...props} store={store} />
    )}>
      {routes}
    </Router>
</Provider>

In einer Routenkomponente (dies sind spezielle Komponenten, die direkte Kinder vom Router sind) kann ich den Kontext wie folgt verwenden:

export class BooksShow extends React.Component {
  static contextTypes = {
    storeIsSynchronized: React.PropTypes.bool
  };
  ...
  render() {
    const { book } = this.props;

    if(this.context.storeIsSynchronized) {
      /* display components */
    } else {
      /* display loading spinner */
    }
}

export default connect(
  (state, props) => {
    return {
      book: _.findWhere(state.books.collection, { isbn: props.params.id } )
    }
  },
  (dispatch) => ({
    actions: bindActionCreators(Actions, dispatch)
  })
)(BooksEdit);

@gaearon Was denkst du über diese Ideen?

@sebastiandeutsch Ich mag diesen Ansatz. Ich experimentiere auch gerade mit Async-Props, deine Ideen sehen hier echt cool aus.

Ich stellte mir vor, dass das Beispiel allgemeiner sein sollte, anstatt auf eine Abstraktion für das Abrufen von Daten zugeschnitten zu sein. Ich mag https://github.com/optimizely/nuclear-js/tree/master/examples/rest-api wirklich als grundlegendes Beispiel für eine einfache Möglichkeit, Stores und Aktionen für Rest-APIs einzurichten.

Ich habe es erweitert, um das Cachen zu unterstützen und sogar laufende Anfragen in einem Speicher zu speichern (so dass der Anrufer bei einer erneuten Anfrage einfach eine Verzögerung erhält, anstatt die xhr neu zu initiieren. Ein robusteres Beispiel dafür, worüber ich spreche, ist hier : https://github.com/jordangarcia/nuclear-api-module-example/tree/master/rest_api. Und ich habe einige Konzepte von @jordangarcia mit großem Erfolg kopiert. Ich denke, die Ansätze hier könnten gut funktionieren auch redux (begleitet von normalizr etc).

@EricSimons geht es eher um Themen und das Finden guter beschreibbarer APIs oder suchen Sie nach bestimmten Ansätzen?

Ich interessiere mich hauptsächlich für Themen (da wir im schlimmsten Fall unsere eigenen beschreibbaren APIs hosten können, damit die Leute sie verwenden können). Vielen Dank an alle oben genannten Kommentatoren, diese Diskussion war bisher fantastisch. Würde gerne mehr Gedanken/Ideen zu hören, was wir in diesen Beispielen behandeln sollten.

Zu Ihrer Information @dan-weaver und andere, die daran zögern Sie nicht , mir eine Nachricht zu

In der Meteor-Welt gibt es ein großes Open-Source-Beispielprojekt, das aus einem Buch über Meteor hervorgegangen ist. Dieses Projekt ist Telescope , eine Webanwendung, die Reddit oder Hacker News ähnelt. Wenn Redux ein ähnliches Beispiel hätte, wäre das großartig. Viele Entwickler haben Meteor gelernt, indem sie dem Buch gefolgt sind und eine kleinere Version von Telescope zusammengebaut haben. Eine Anwendung wie Telescope würde alle von Dan angesprochenen Themen einer Anwendung abdecken, mit der die meisten Entwickler bereits vertraut sind (wegen Hacker News, Reddit, ..).

Die Basis für eine ähnliche Anwendung habe ich vor einigen Monaten bei webapp * geschaffen. In diesem Projekt sind der Build-Prozess, CSS-Module, Authentifizierung, ein separater Server für die API, MongoDB, serverseitiges Rendering, GraphQL und mehr bereits eingerichtet (obwohl einige Dinge etwas veraltet sind, etwas mehr Arbeit benötigen oder erledigt werden könnten) besser). Es hat außerdem Reduzierer-Splitting, etwas, von dem ich glaube, dass es kein anderes Beispiel hat. Es fehlen vor allem gute Lösungen für das Abrufen von Daten, optimistische Updates und Echtzeitdaten. Außerdem ist es etwas veraltet, da 2 Monate wie eine Ewigkeit erscheinen, wie schnell alles gerade voranschreitet :)

Wenn Sie einen Ausgangspunkt für die Erstellung des Beispiels für den Kurs suchen, könnte _webapp_ vielleicht eine Inspiration sein. Und ich würde gerne etwas Ähnliches wie Telescope in Redux sehen.

*_Der Knowhow- Ordner enthält einige Informationen über die Architektur/die getroffenen Entscheidungen._


_Sidenote:_ Da mir aufgefallen ist, dass Redux keine Geschichte zum Abrufen von Daten hat, erstelle ich derzeit ein Relay-ähnliches System, das sich in Redux integriert. Aus diesem Grund habe ich _webapp_ 2 Monate lang nicht aktualisiert. Falls ich mit der Erstellung dieses Systems erfolgreich bin, werde ich _webapp_ damit fortfahren.

Ein Problem, mit dem man konfrontiert ist, ist, dass Redux ein sehr niedriges Niveau hat und daher ziemlich uneinsichtig ist, wie Sie _eigentlich_ eine Anwendung darauf aufbauen. Ich bin mir daher nicht sicher, ob wir einfach _eine_ Beispielcodebasis pflegen können, um daraus zu lernen, da es so viele mögliche gültige Abstraktionen _zwischen_ Redux und der endgültigen Benutzeroberfläche gibt. Dies wird durch einige Diskussionen in diesem Thread veranschaulicht, in denen viele verschiedene Möglichkeiten zum Laden von Daten ohne klaren Gewinner präsentiert werden - es gibt nicht den einen richtigen Weg, da sich die Anwendungsskalen stark unterscheiden.

Aus diesem Grund ist es wünschenswert, mit "_The_ Advanced TODOMVC of Redux" eine Spezifikation zu entwickeln, die alle von Dan zuvor erwähnten erweiterten Funktionen erfordert.

Wenn wir voranschreiten, glaube ich, dass wir mehr Abstraktionen/Bibliotheken/Frameworks _um_ Redux sehen werden, die diese fortschrittliche Anwendung als Proof-of-Concept verwenden könnten. Tatsächlich kann dies im Laufe der Zeit umbenannt werden, um nicht Redux-spezifisch zu sein.

An der API-Front würde ich gerne sehen, dass es einer Art Standard folgt ( JSON-API bietet eine hervorragende Grundlage für die Denormalisierung und Beschreibung von Beziehungen) und schließlich einen GraphQL-Server davor.

Was die Struktur dieser Community angeht, vermute ich, dass wir ein Kernrepo haben könnten, das die Anwendungsspezifikationen, Serverimplementierungen sowie eine Liste/Vergleichstabelle aller aktuellen Implementierungen enthält.


Nebenbei, aber teilweise damit zusammenhängend, Anmerkung zu dem spezifischen Thema hier, ich denke, wir täten gut daran, dieses Thema zur Klärung des Umfangs von Redux zu priorisieren - und die Natur auf niedriger Ebene zu betonen.

Ps. Ich habe bald einen "Real World Redux"-Vortrag bei React London (wo ich hoffentlich Zeit habe, die fortgeschritteneren Probleme zu untersuchen), also haltet Ausschau :D

Ich wäre bereit, daran zu arbeiten, ich denke, es ist eine großartige Idee, Neulingen eine brauchbare, kommentierte und erläuterte Redux-Anwendung bereitzustellen, die keine Todo-Liste ist. Hat die Arbeit daran schon begonnen @EricSimons?

Es scheint viele ähnliche Fragen zu geben, wie man die Boilerplate von redux reduziert und damit etwas Reales baut. Ich glaube, ich habe (unter anderem) eine ziemlich gute Lösung gefunden, über die ich hier geschrieben habe:

https://medium.com/@timbur/react -automatic-redux-providers-and-replicators-c4e35a39f1

TL;DR: Sie können redux Anbieter erstellen, die sich automatisch anhand ihrer propTypes mit Ihren Komponenten components , ein Verzeichnis providers und ein optionales, aber empfohlenes Verzeichnis themes . Alles ist leicht austauschbar, verständlich, wartbar, erweiterbar und wiederverwendbar. Es gibt viel mehr bei all dem, wie heißes Neuladen von Client und Server, Server-Rendering usw. usw. usw. Ich habe heute eine App von Grund auf basierend auf dem mitgelieferten Boilerplate erstellt und es dauerte ungefähr 10 Minuten im Gegensatz zu den 1 Stunde würde es normalerweise dauern. :)

Aus Erfahrung als Early-React-Adopter würde ich die Github-API in einem Beispiel lieber nicht verwenden.

  • Seine Authentifizierung ist zu kompliziert für jemanden, der nach etwas sucht, das "einfach funktioniert".
  • Es ist nicht zum Experimentieren geeignet. Um beim Ausführen von API-Mutationen nicht destruktiv zu sein, müsste ich ein separates / wegwerfbares Github-Konto erstellen.

Verwenden Sie stattdessen eine einfache benutzerdefinierte API. Wir möchten nicht von Drittanbietern abhängig sein und jedem ermöglichen, seine eigene Instanz wie json-server auszuführen .

Dies würde auch andere Rest-Backend-Implementierungen in Javascript, Java, C#, PHP usw. ermöglichen. Dies würde helfen, die Entwicklung anzukurbeln, da es ziemlich schlüsselfertig ist.

Übrigens unter dem Link in meinem obigen Kommentar finden Sie Details zum Erstellen einer Blog-App. Ich plane, die Benutzerauthentifizierung und all das innerhalb der nächsten Woche hinzuzufügen.

Hallo Leute! Ich studiere ReactJS und habe eine Version meines persönlichen URL-Shorteners mit React + Redux entwickelt. Mein Beispiel verwendet Gulp + Browserify + Babelify für die Frontend-Entwicklung. Ich habe Unit-Tests mit Mocha und Enzyme für Komponenten und Aktionen geschrieben. Dieses Beispiel hat auch:

  • Erstellen, Lesen und Aktualisieren von Operationen
  • Authentifizierung mit Json Web Token
  • Seitennummerierung
  • Stichworte
  • CORS

Es gibt einige Fehler in der Benutzeroberfläche und der Benutzerfreundlichkeit. Aber es funktioniert =)
Vielleicht kann es jemand als Basis für ein reales Beispiel verwenden.

Demo: https://gustavohenrique.github.io/gh1
Quelle: https://github.com/gustavohenrique/gh1

Ich akzeptiere Vorschläge zur Verbesserung dieses Beispiels. Danke!

Etwas spät zur Party, aber ich habe gerade eine vollwertige Management-Webanwendung gestartet, die auf Redux basiert.

Wir verwenden redux-thunk für asynchrone Jobs und verwenden redux-ignore, was eine überraschende Verbesserung (_on mobile_) brachte, nur indem wir unsere Top-Level-Reduzierer filtern.
Die Web-App ist zu 100 % reaktionsschnell, sodass sie auf Mobilgeräten einfach zu verwenden/zu testen ist.

Wir verwalten optimistische Updates durch "Rollback" der vorherigen Aktion. Die betroffenen Reduzierstücke wissen, wie sie ihren vorherigen Zustand zurückverfolgen können, daher ist es ziemlich isoliert und effizient.

Wie auch immer, hier sind die Links http://www.handy-erp.com/en/
Erstellen Sie einfach ein Konto und hauen Sie ab.

@SebastienDaniel Herzlichen Glückwunsch! es ist eine schöne Webseite. Haben Sie den Redux-Teil in ein öffentliches Repository gestellt?

Danke @gustavohenrique
Leider nein, die Quelle befindet sich nicht in einem öffentlichen Repo. Ich bin jedoch ziemlich offen dafür, den Quellcode zu verwenden, um Fragen zu klären oder vielleicht Demos zu erstellen, um der Community zu helfen.

Ich würde wirklich gerne Beispiele für Modularität sehen. Wenn Sie eine App mit einem großen Funktionsumfang erstellen, suchen Sie wirklich nach einer Möglichkeit, einzelne Verantwortungsmodule zu erstellen. Besser für Teams, besser für die Wartbarkeit.

Zuerst vielen Dank für das Teilen des Codes!@gustavohenrique
Andere Dinge:
Ich denke, kann eine Benutzerliste sein? Anmeldung? registrieren...
redux braucht diese Beispiele!

Ich stimme @gggin und @EricSimons zu, eine vollwertige produktionsfertige Version dieser Funktionen wäre erstaunlich:

Authentifizierung (E-Mail/Pass & oAuth, JWT)
CRUD für Blogposts & Kommentare zu Blogposts
Benutzern folgen
Globaler Feed aller Blogs & ein Feed der Blogs der Benutzer, denen du folgst
Tagging-System
Benutzerprofile/Profilinfo bearbeiten

Darüber hinaus wäre ein grundlegendes Rollen- oder Berechtigungssystem großartig. Etwas, das den Teams von GitHub oder den Mitgliedern von Trello entspricht

Hallo Leute,

Ich habe an einem lockeren Vorschlag für ein robustes redux crud api nur basierend auf meinen Erfahrungen der letzten Wochen:

https://github.com/ppiekarczyk/redux-crud-api-middleware/blob/master/README.md

Jedes Feedback wäre dankbar. Danke!

Ich wäre bereit, auch die Anwendung, die ich gerade baue, in ein Open-Source-Beispielprojekt umzuwandeln.

Hallo zusammen – wir freuen uns, Ihnen mitteilen zu können, dass die Beispielcodebasis fast fertig zur Überprüfung ist. Es ist sehr gründlich und deckt die meisten der realen Anwendungsfälle ab, über die wir in diesem Thread gesprochen haben (Authentifizierung, CRUD, Paginierung usw.). @vkarpov15 muss noch ein paar Dinge fertigstellen, aber es sollte irgendwann Anfang nächster Woche fertig sein.

Wir würden uns über Ihre Hilfe bei der Überprüfung der Codebasis freuen. Ich weiß, dass @gaearon erwähnt hat, dass er bereit wäre, vor ein paar Monaten einen Blick darauf zu werfen, und jedes Feedback aus der Community hier wäre ausgezeichnet. Wir werden dieses Repository für die erste Codebasis verwenden, während wir es überprüfen und iterieren, und dann das endgültige an das offizielle Redux-Repository syndizieren, sobald es fertig ist. Fühlen Sie sich frei, einen Stern zu sehen/zu sehen, und ich werde auch ein Update in diesem Thread veröffentlichen, sobald die Codebasis online und zur Überprüfung bereit ist.

Ich beantworte gerne alle Fragen und danke allen hier für die ausgezeichnete Diskussion!

Hört sich gut an. Stellen Sie sicher, dass Sie eine Erwähnung und einen Link in der zugehörigen Redux-FAQ-Frage hinzufügen, wenn sie fertig ist.

Wie versprochen steht die Codebasis unter https://github.com/GoThinkster/redux-review zur Überprüfung bereit.

Hey Leute, vielen Dank für die tolle Diskussion und das tolle Beispiel aus der realen Welt.

Um die Liste solcher Beispiele zu ergänzen, stieß ich auf dieses Beispiel https://github.com/andrewngu/sound-redux , eine funktionierende Demo, die auf https://soundredux.io/ bereitgestellt wurde @gaearon gesprochen hat. Bin mir aber nicht sicher, wäre also hilfreich wenn mir jemand Feedback geben könnte. Wenn es sich qualifiziert, ist es eine gute Ergänzung zur Liste. Plus seine aktiv für die letzten anderthalb Jahre gewartet.

Und schließlich ein besonderer Dank an @EricSimons für das tolle Beispiel aus der realen Welt.

Ich habe tatsächlich einen FAQ-Eintrag hinzugefügt, der auf eine Reihe von realen React- und Redux-Apps verweist, unter http://redux.js.org/docs/faq/Miscellaneous.html#miscellaneous -real-projects . (Eigentlich weiß ich, dass ich diese Sound-Redux-App schon einmal gesehen habe, aber ich glaube nicht, dass ich sie meiner Liste hinzugefügt habe. Das muss ich tun.)

Ich werde dieses Thema mit der Begründung schließen, dass es angesichts der Anzahl von "echten" Apps, die wir können, nicht mehr dringend erforderlich zu sein scheint, direkt dem Redux-Repository ein größeres Beispiel hinzuzufügen zeigen auf. Wenn jemand aktiv ein konkretes Beispiel zum Repo beitragen möchte, sagen Sie etwas und wir können dies wieder öffnen.

Und ja, danke an alle, die Diskussionen und Beispiele beigetragen haben!

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen