Durch Redux zum Leben erweckt zu werden, ist einfach Gospel. Es ist zu einfach und elegant. Großes Lob! ! !

Übrigens, ich habe heute zufällig gesehen, dass ein Ausländer es auf Twitter repostet hat, ich dachte, es wurde von einem Ausländer geschrieben, aber ich habe nicht erwartet, dass es ein Klassenkamerad von Alipay ist, 👍

Wir freuen uns auf die Erweiterung der Effekte

Verwendet die Produktionsumgebung von Alipay diese Architektur?

@besteric dva ist gerade herausgekommen und wurde noch nicht angewendet, aber die Anwendungsarchitektur dahinter wird seit einiger Zeit verwendet.

Kann Reduzierer so geschrieben werden:

const reducer = (state, { type, payload }) => {
  switch (type) {
    case 'products/query':
      return { ...state, loading: true, };
    case 'products/query/success':
      return { ...state, loading: false, list: payload };
    default
      return state;
  }
}

app.model({
  reducer
})

Dies ermöglicht es, einige Verfahren höherer Ordnung auf den Reduzierer anzuwenden.

Lob, ich habe ein paar Demos geschrieben und es gibt nur ein Problem, das Modell kann nur verwendet werden
app.model(Model1); app.model(Model2);
Ist diese Methode, um die Kombination zu vervollständigen, in der Tat denke ich, dass sie ideal ist
app.model([Model1,Model2])
irgendeine Art von

Es ist zu mühsam, den Versand zwischen den Komponenten zu übergeben, ziehen Sie die folgende Lösung in Betracht

Verwenden Sie nicht bindActionCreators ?

Ist das spezifische Szenario der erweiterten Verwendung von @yesmeck Reducer nur redo/undo ?Ich möchte nicht, dass dva zu flexibel ist, und ich werde erwägen, es in Zukunft durch ein Addon hinzuzufügen.

Wir verwenden viel in unserem Projekt. Zum Beispiel werden wir die ähnlichen Teile mehrerer Reduzierer in eine High-Level-Methode extrahieren, um den ursprünglichen Reduzierer zu modifizieren, und es gibt High-Level-Methoden, die es dem Reduzierer ermöglichen, den Zustand zurückzusetzen, wenn die Route ändert. , und dies https://github.com/erikras/multireducer

@ Tinker404 Ich denke , es wäre klarer, das Modell separat zu deklarieren, und es wäre einfacher, es hinzuzufügen und zu löschen. Ich würde das schreiben:

app.model(require('../models/a'));
app.model(require('../models/b'));

@JimmyLv persönlich zieht es vor, actionCreator nicht zu verwenden, sondern nur dispatch .

@yesmeck ok, ich überlege es mir nochmal.

Es gibt auch Verfahren höherer Ordnung, die es dem Reduzierer ermöglichen, den Zustand zurückzusetzen, wenn sich die Route ändert

Ich denke, dass dieses Szenario angemessener ist, indem Sie Routing-Änderungen in subscriptions abonnieren und dann den Status durch Aktion zurücksetzen. Oder gibt es einen Vorteil bei der Verwendung der Reducer-Enhancer-Methode?

Ich denke, dass dieses Szenario besser geeignet ist, indem Sie Routingänderungen in Abonnements abonnieren und dann den Status durch Aktion zurücksetzen

In diesem Fall muss jeder Reduzierer, der zurückgesetzt werden muss, die Reset-Logik schreiben. Wenn wir eine High-Level-Methode verwenden, müssen wir dies jetzt nur tun:

combineReducers({
  products: composeReducers({  // composeReducers 的实现见下面
    recycle(LOCATION_CHANGE, initialState),  // recycle 用来在路由变化时重置状态
    products
  })
})

Ein anderes Szenario ist die gleiche Logik, über die ich spreche, um verschiedene Reduzierer zu extrahieren. Zum Beispiel gibt es eine Liste von Produkten und eine Liste von Benutzern, und ihre Reduzierer sehen so aus:

// reducers/products.js
const reducer = (state, { type, action}) => {
  switch (type) {
    case 'products/FETCH_SUCCESS':
      return {
        ...state,
        loading: false,
        list: payload
      }
    default:
      return state
  }
}

// reducers/users.js
const reducer = (state, { type, payload}) => {
  switch (type) {
    case 'users/FETCH_SUCCESS':
      return {
        ...state,
        loading: false,
        list: payload
      }
    default:
      return state
  }
}

Hier sind die beiden Reduzierer fast gleich, also extrahieren wir sie und schreiben einen Listenreduzierer:

const list = (actionType) => {
  return (state, { type, payload }) => {
    switch (type) {
      case actionType:
        return {
          ...state,
          loading: false,
          list: payload
        }
        break;
      default:
        return state
    }
  }
}

Dann implementieren wir ein composeReducers , um diese 3 Reduzierer zu kombinieren:

function composeReducers(...reducers) {
  return (state, action) => {
    if (reducers.length === 0) {
      return state
    }

    const last = reducers[reducers.length - 1]
    const rest = reducers.slice(0, -1)

    return rest.reduceRight((enhanced, reducer) => reducer(enhanced, action), last(state, action))
  }
}

Auf diese Weise wird der Reducer für die Produktliste und die Benutzerliste zu diesem:

// reducers/products.js
const reducer = (state, { type, payload}) => {
  // 其他逻辑
}

export default composeReducer(reducer, list('products/FETCH_SUCCESS'))

// reducers/users.js
const reducer = (state, { type, payload}) => {
  // 其他逻辑
}

export default composeReducer(reducer, list('users/FETCH_SUCCESS'))

Liste ist nur ein Beispiel, tatsächlich gibt es viele Reduzierer im Projekt, die die gleiche Logik haben.

@yesmeck 👍, die Rolle des Reducer Enhancers wurde bisher unterschätzt.

@sorrycc kannst du sagen warum? Explizit aufgerufen mit dispatch Vergleich?

@ Tinker404 Ich denke , es wäre klarer, das Modell separat zu deklarieren, und es wäre einfacher, es hinzuzufügen und zu löschen. Ich würde das schreiben:
app.model(require('../models/a'));
app.model(require('../models/b'));

Ich schlage auch eine Methode vor, die mehrere Modelle gleichzeitig übergeben kann.Große Projekte können viele Modelle haben.Ich benötige (importiere) jetzt alle und modelliere dann jedes Modell einzeln, was nicht sehr bequem ist.Mein aktueller Weg des Schreibens ist:

// models是个文件夹，有很多model
import models from './models';

models.forEach((m)=>{
    app.model(m);
});

// models.js
const context = require.context('./', false, /\.js$/);
const keys = context.keys().filter(item => item !== './index.js');
const models = [];
for (let i = 0; i < keys.length; i++) {
  models.push(context(keys[i]));
}
export default models;

Es ist sehr D.VA.

Ich habe die Verwendung der Antd-Formularkomponente im Benutzer-Dashboard gefunden. Ich erinnere mich, dass sie nicht für reine Komponenten verwendet werden kann. Ist dies jetzt möglich?

@codering Ich erinnere mich nicht, dass es Einschränkungen gibt, Probleme mit Antd können unter https://github.com/ant-design/ant-design/issues gestellt werden.

https://github.com/react-component/form/blob/master/README.md
So steht es im HINWEIS.

Hallo, ich möchte Ihre dva verwenden. Derzeit verwende ich die von React Webpack Redux Scaffolding generierte Verzeichnisstruktur. Ich habe den Code in Bezug auf das Benutzer-Dashboard-Beispiel in Ihrem Beispiel geändert, aber nach dem Start ist nichts zu sehen. Können Sie helfen? Ich finde heraus, wo es ist Etwas ist schief gelaufen, meine Projektadresse: https://github.com/baiyulong/lenovo_parts

@baiyulong, warum nicht direkt basierend auf der Verzeichnisstruktur des Benutzer-Dashboards?

@sorrycc Ich verwende jetzt die Benutzer-Dashboard-Verzeichnisstruktur.Gibt es eine spezielle Behandlung oder Schreibweise für das dva-Routing?
export default function({ history }) {
return (
<Router history={history}>
<IndexRoute component={HomePage} />
<Route path='/' component={HomePage}>
<Route path='/create' component={CreateOrder} />
</Route>
</Router>
)
}
Diese Route habe ich geschrieben, HomePage kann, ich habe einen <Link to='/create'>Create</Link> -Link geschrieben, ich kann nicht zur CreateOrder-Komponente gehen, nachdem ich darauf geklickt habe

Es gibt keine spezielle Möglichkeit, die Route von @baiyulong dva zu schreiben, bitte versuchen Sie es:

1. Liegt ein Fehler vor
2. Versuchen Sie, direkt auf die Route /create zuzugreifen

@nikogu vielen Dank, mir geht es gut, nachdem ich das Nesting herausbekommen habe

Hallo, kann dva Hot Loading von Modellen unterstützen?

@kkkf1190 erwägt dies und wird es unterstützen.

👍

Wollte nur danke sagen. . .

Ich dachte immer, dass das Gerüst von vue-cli von vuejs sehr gut ist, aber nachdem ich das gelesen habe, hat sich meine Meinung komplett geändert.

Ganz toller Rahmen! Recherchiere schon eine Weile. @sorrycc Ich möchte Yunda zwei Fragen stellen:

1. Kann dva perfekt in React-Native-Projekten verwendet werden?
2. Kann dva+reactjs serverseitiges Rendern gut unterstützen?

@freemember007

1. React-native unterstützen, Referenzbeispiel: https://github.com/sorrycc/dva-example-react-native
2. Theoretisch stellt der Serverbetrieb kein Problem dar. Sowohl Redux als auch React-Router dahinter unterstützen SSR, aber es wird einige Zeit dauern, es auf dva anzuwenden, da die entsprechende Logik geklärt und gut verpackt sein sollte

@sorrycc Gibt es jetzt eine Lösung für die Unterstützung von Reduzierern höherer Ordnung? Unser Projekt verwendet aufgrund der Wiederverwendung viele High-Order Reducer

Unterstützt von @ancheel , kann global oder lokal sein, Referenzanwendungsfall: https://github.com/dvajs/dva/blob/master/test/reducers-test.js

Nachdem der Zustand des Modells geändert wurde, wie man es erneut ändert, tritt dieses Problem jetzt immer auf
antd.js:32924 Warnung: setState(...): Kann nicht während eines bestehenden Zustandsübergangs aktualisiert werden (z. B. innerhalb render oder dem Konstruktor einer anderen Komponente).Rendermethoden sollten eine reine Funktion von Eigenschaften und Zustandskonstruktoren sein Nebeneffekte sind ein Anti-Pattern, können aber nach componentWillMount verschoben werden.

Sehr spannend, versuchen Sie es in der Produktionsumgebung einzusetzen, hoffen Sie, es weiter zu optimieren und zu verbessern

nerf das!

Gute Arbeit。Danke!!!

@sorrycc Ich freue mich darauf, serverseitiges Rendern zu unterstützen!

Unterstützt von @mountainmoon , siehe https://github.com/sorrycc/dva-boilerplate-isomorphic .

Eine Welle von Rädern kam :+1:

Hallo, ich habe mich gerade mit dem Erlernen dieser DVA in Verbindung gesetzt. Nachdem ich den Code einige Tage lang gelesen habe, habe ich ein paar Fragen in meinem Herzen. Ich möchte fragen:
Ich habe gesehen, dass Ihre Demos alle Single-Page-Anwendungen sind, aber sie sind alle Multi-Page-Anwendungen in der Entwicklung.Ich möchte fragen, ob Routing nicht in der Entwicklung von Multi-Page-Anwendungen verwendet wird, wie man stattdessen Komponenten lädt, vielleicht bin ich es Fragen Sie einen Idioten. Es ist ein bisschen verwirrend, weil ich kein Routing verwende, sodass der in den Modellen festgelegte Listener nicht klar ist, wo er auslösen soll:
history.listen( Ort => {
if(location.pathname === '/users') {
versenden({
type:'querySuccess',
Nutzlast:{}
})
}
})
PS: Beim Laden von Daten in die querySuccess-Methode und Verwendung von export default connect(mapStateToProps)(Users); wird auch ein Fehler gemeldet:
connect.js:41 Uncaught TypeError: Klasse kann nicht als Funktion aufgerufen werden
Ich fühle mich sofort wie ein Idiot, ich weiß nicht, ob ich Sie bitten kann, es mir zu erklären, danke!

Warum dwa? Englisch Bitte

Ich mag diese Art zu schreiben nicht.

@codering Sie haben die Verwendung von Antd-Formularkomponenten im Benutzer-Dashboard erwähnt.Ich erinnere mich, dass es nicht für reine Komponenten verwendet werden kann.Ist es jetzt möglich?
Ich bin auch am häufigsten darauf gestoßen: Wenn es sich um eine reine Funktionskomponente handelt, kann die getFieldDecorator-Funktion nicht über props.form.getFieldDecorator abgerufen werden.Wenn Sie eine Komponente mit Extends erstellen, können Sie sie abrufen.
Ich weiß nicht, ob Gott eine Lösung hat @sorrycc

Können Sie bitte dieselbe Seite auf Englisch starten? Wir können das nicht verstehen, und warum brauchen wir dva.

Hallo, wenn es sich um ein großes Projekt handelt, ist sein Status sehr groß und die Verarbeitung sehr umständlich. Soll es in mehrere Modelle aufgeteilt werden?

@yazhou-zyz Ich habe das gleiche Problem wie du:
Warnung: setState(...): Kann nicht während eines bestehenden Zustandsübergangs aktualisiert werden (z. B. innerhalb von Render oder dem Konstruktor einer anderen Komponente). Render-Methoden sollten eine reine Funktion von Props und State sein; Konstruktor-Seiteneffekte sind ein Anti-Muster, aber kann nach componentWillMount verschoben werden.
Ich wollte fragen, wie du es gelöst hast?

Lernen

studiere weiter

Der dva ist für Bauprojekte von großem Referenzwert.

gute Arbeit~

Wo finde ich die Dokumente auf Englisch??? Das Übersetzen des Themas mit Übersetzer-Engines ist problematisch und das Verständnis reicht nicht aus. Mit Englisch könnt ihr die Welt erreichen. Mach weiter so!! :Rakete:

dva wird in React-nativen 0.47.X- und React16.0.0-Versionen nicht ausprobiert

@vecold konnte es immer verwenden und sagte, dass der Einladungscode oder die Fehlermeldung nicht verwendet werden können

Gibt es eine Chance, dass wir eine englische Übersetzung der Dokumente bekommen?
Danke!

Im Business-Code ist ein solches Beispiel üblich.Eine lokale Zustandsaktualisierung kann sich auf den gesamten Body auswirken.Viele Stellen, die nicht neu gerendert werden müssen, werden ebenfalls neu gerendert,was die Leistung der Seite stark reduziert. Kann diese Funktion hinzugefügt werden, um automatisch den Status zu analysieren, von dem die Redux-Verbindung abhängt, um unnötige mapStateToProps-Berechnungen zu reduzieren und neu zu rendern 👍

sehr gut
aber es baut alle Seiten auf, wenn ich hoffe, eine einzelne Seite zu bauen

_inoffizielle Übersetzung_

Warum Dwa?

Redox ist gut. Aber es gibt zu viele Konzepte, getrennte Reduzierer, Sagen und Aktionen (aufgeteilt in verschiedene Dateien)

1. Muss häufig zwischen Reduzierern, Weisen und Aktionen wechseln
2. Unbequemlichkeit bei der Organisation von Geschäftsmodellen (oder Domänenmodellen). Wenn wir beispielsweise bereits user_list haben und product_list erforderlich ist, muss eine Dateikopie dupliziert werden
3. Saga ist schwer zu schreiben. Sie müssen für jede einzelne Aktion Fork -> Watcher -> Worker machen.
4. Die Eingabe ist mühsam und kompliziert

Was ist Dva?

Es ist ein Lite-Wrapper über das vorhandene Framework (Redux + React-Router + Redux-Saga ...). Kein neues Konzept beteiligt. < 100 Zeilen Code. (Inspiriert von Ulme und Choo.)

Es ist ein Framework, keine Bibliothek. Wie Ember.js schränkt es die Art und Weise ein, wie Sie jeden Teil schreiben. Es ist besser kontrollierbar für Teamarbeit. Dva kapselt alle Abhängigkeiten mit Ausnahme von „react“ und „react-dom“ als peerDependencies

Seine Implementierung führt so wenig wie möglich neue Syntaxen ein. Es verwendet die Abhängigkeiten wieder. Zum Beispiel ist die Router-Definition genau die gleiche Art und Weise wie die JSX von React-Router.

Die Kernfunktionalität ist app.model . Es kapselt Reducer, InitialState, Action, Saga zusammen.

app.model({
  namespace: 'products',
  state: {
    list: [],
    loading: false,
  },
  subscriptions: [
    function(dispatch) {
      dispatch({type: 'products/query'});
    },
  ],
  effects: {
    ['products/query']: function*() {
      yield call(delay(800));
      yield put({
        type: 'products/query/success',
        payload: ['ant-tool', 'roof'],
      });
    },
  },
  reducers: {
    ['products/query'](state) {
      return { ...state, loading: true, };
    },
    ['products/query/success'](state, { payload }) {
      return { ...state, loading: false, list: payload };
    },
  },
});

Früher haben wir sagas/products.js, reducers/products.js actions/products.js erstellt und zwischen ihnen gewechselt.

Kernpunkt:

• Namespace: das key des reducer in seinem rootReducer Objekt
• Zustand: initialState von reducer
• Abonnement: das neue Konzept von [email protected] , ausgeführt, wenn dom fertig ist: Ein Abschied von FRP
• Effekte: leichter Salbei
• Reduzierungen

Wie benutzt man

Siehe Beispiele

Fahrplan

• devtool Hot-Neuladen
• Dynamische Konfiguration für Router
• Effects unterstützt mehr saga Modelle
• Gerätetest
• Weitere Beispiele: todolist, Benutzer in antd-init, beliebte Produkte

FAQ

Dev-Tool unterstützt?

Kompatibel mit redux-devtool, css-livereload. Benötigen Sie mehr Arbeit für Hot-Reload

Gut für Prod-Env?

sicher

Inklusive aller Funktionalitäten von redux + redux-saga?

Jawohl

Browser-Kompatibilität?

Kein IE8 wegen Redux-Saga. (Später können Thunk, Promise, Observable als Erweiterungen auf der Effektebene angewendet werden)

bitte ähnlich

['products/query']: function*() {}
['products/query'](state) {}

Was ist die Syntax? Können Arrays als Funktionsnamen verwendet werden?

@clemTheDasher Funktionsname kann in JavaScript ein berechneter Schlüssel ( NICHT Array) sein. Ausführlichere Verweise auf Methodendefinitionen |

var obj = {
  property( parameters… ) {},
  *generator( parameters… ) {},
  async property( parameters… ) {},
  async* generator( parameters… ) {},

  // with computed keys:
  [property]( parameters… ) {},
  *[generator]( parameters… ) {},
  async [property]( parameters… ) {},

  // compare getter/setter syntax:
  get property() {},
  set property(value) {}
};

Neueinsteiger melden, kommt her und arbeitet weiter hart daran, euch Frontend-Wissen anzueignen

@clemTheDasher Das ist eine berechnete Eigenschaft.

Warum ist der Link https://github.com/dvajs/dva/tree/master/examples/count 404?

Lernen!

schau auf zu gott

Gott sei Dank, danke für Open Source

darf ich nicht von euch lernen!

Ich habe gelernt, danke, dass Sie uns ein so bequemes Framework zur Verfügung stellen

Die Demo-Links auf Github sind abgelaufen.

@sorrycc unterstützt dva jetzt serverseitiges Rendern?

Kann Reduzierer so geschrieben werden:

const reducer = (state, { type, payload }) => {
  switch (type) {
    case 'products/query':
      return { ...state, loading: true, };
    case 'products/query/success':
      return { ...state, loading: false, list: payload };
    default
      return state;
  }
}

app.model({
  reducer
})

Dies ermöglicht es, einige Verfahren höherer Ordnung auf den Reduzierer anzuwenden.

Der Schreibstil von Redux ist prägnant, und es ist nur eine Zeile erforderlich, um den Zustand zu ändern, aber es scheint, dass mehrere Codezeilen durch syntaktischen Zucker zusammen geschrieben werden. Aber ich muss immer noch ...state verwenden, um den verbleibenden Status an die nächste Haltestelle zu liefern, sonst ist der Status unvollständig. Mit anderen Worten, während der Reduzierungsphase kann ein Zustand verloren gehen, wenn er falsch geschrieben wird.

In gewisser Weise ist die Idee von Vuex einfacher zu lesen und natürlicher. Schreiben Sie so etwas (nicht genau).

const mutation = {
  ['products/query'](state) {
    state.loading = true
  },
  ['products/query/success'](state, payload) {
    state.loading = false
    state.list = payload
  }
}

Codemäßig ist mir nur wichtig, welchen Zustand ich (synchron) ändere. Vuex sollte auch eine Schicht auf der Außenseite umhüllen, um die Lieferung der nächsten Haltestelle anzugeben. Eventuell werden vor der Auslieferung auch einige Abwehrchecks (Raten) durchgeführt oder Haken gesetzt.

Fragen Sie mich, ob die Beispielseite der offiziellen dva-Website nicht angezeigt werden kann, und melden Sie einen Fehler. Handelt es sich um ein Upgrade?

bitte ähnlich

['products/query']: function*() {}
['products/query'](state) {}

Was ist die Syntax? Können Arrays als Funktionsnamen verwendet werden?

ES6 ermöglicht es Literalen, Objekte zu definieren, (Ausdruck) als Eigenschaftsnamen des Objekts, d. h. den Ausdruck in eckige Klammern zu setzen.
Wie zum Beispiel

obj = {
  ['xxname']: 'what ever you defined',
  ['xxyy'](args) {
    ....
  }
}

Es gibt eine Frage, 'products/query' wird verwendet, um den Aufruf von Reducern zu verarbeiten, und es wird über eine Zeichenfolge mit dem Namensraum verknüpft.Später, wenn das Projekt größer wird, z. B. Hunderte von Methoden. Wenn mein Namespace geändert werden muss. Hundert Methoden ändern?

@yesmeck 👍, die Rolle des Reducer Enhancers wurde bisher unterschätzt.

Weiß nicht, ob es hier Unterstützung gibt?