Wie man Ember wie berechnete Eigenschaften in Immutablejs und Redux und Flux und React

Question

einrichten Ich bin verwendet, um Eigenschaften in Ember Object Model berechnet. Auf diese Weise können Sie berechnete Eigenschaften angeben, die von anderen Eigenschaften abhängen.

Say fullName hängt von firstName und lastName, ich Setup-Eigenschaften als Funktion berechnet kann computeProperties und rufen computeProperties jedes Mal, wenn ich eine Änderung vornehmen.

Beispiel:

function computeFullName(state) { 
    const fullName = state.get('firstName') + state.get('lastName'); 
    const nextState = state.set('fullName', fullName); 
    return nextState; 
} 

function computeProperties(state) { 
    const nextState = computeFullName(state); 
    return nextState; 
} 

// store action handler 
[handleActionX](state) { 

    let nextState = state.set('firstName', 'John'); 
    nextState = state.set('lastName', 'Doe'); 

    nextState = computeProperties(nextState); 

    return nextState; 
} 

Gibt es eine Möglichkeit Setup automatisch Eigenschaften berechnet, so dass ich zu jeder Zeit zusätzliche Funktionen nicht aufrufen. In Redux oder in ImmutableJS.

Answer 1

Redux Autor hier!

Using reselect as suggested by WildService ist der Weg zu gehen. Ich denke, wir werden das nicht in den Kern aufnehmen, weil die Wiederwahl die Arbeit gut macht und es uns gut geht, dass es eine separate Bibliothek ist.

Ich wollte ein paar Dinge beachten:

• Auch bei Neuauswahl, Sie wollen nicht, Daten in Ihrem Minderer zu berechnen. Selektoren sollten auf den Zustand von Reduzierern verwaltet werden. Mit anderen Worten, Selektoren sind der Schritt zwischen Ihrem Redux Store-Status und Ihren Komponenten - sie befinden sich nicht in Ihren Reducern. Es ist wichtig, dass Sie den Redux-Status normalisieren, damit er einfach zu aktualisieren ist.

• Wir empfehlen Ihnen, tatsächlich Selektoren neben die entsprechenden Reduzierungen zu definieren, so dass , wenn Sie den Zustand ihre Form ändern, müssen Sie nicht Ihre Komponenten ändern müssen -sie stattdessen die Wähler würden verwenden. Sie können ein Beispiel dafür in der Redux folder of Flux Comparison

• sehen. Wir haben eine documentation page introducing reselect and describing how to use it for computing derived data. Hör zu.

Answer 2

Um berechnete Eigenschaften zu erstellen, können Sie die eigenständige Observable-Bibliothek mobservable verwenden.

var user = mobservable.props({ 
    firstName: 'John', 
    lastName: 'Doe', 
    fullName: function() { 
    return this.firstName + this.lastName 
    } 
}); 

var nameViewer = mobservable.ObservingComponent(React.createClass({ 
    render: function() { 
     return (<span>{user.fullName}</span>) 
    } 
}); 

Das sollte der Kern von ihm sein, nun jede Änderung user.firstName oder Nachnamen Ihrer nameViewer Komponente rerender. Sie können dies weiter mit Flussimplementierungen wie redux kombinieren, um die Daten zu ändern und den Benutzer selbst durch Ihren Komponentenbaum zu schieben. Aber beachten Sie, dass das Benutzerobjekt selbst nicht unveränderlich ist (in diesem Fall wäre es überhaupt nicht beobachtbar ;-)) Siehe auch trivial und slightly more interesting Geigen für einige Beispiele.

Answer 3

Auschecken reselect. Kompostierbare reine Funktionen für die effiziente Berechnung abgeleiteter Daten aus Speichern. Afaik gibt es Pläne, die Selectors von Selects zu einem späteren Zeitpunkt in den Redux-Core zu rollen, wenn sie sich als beliebt herausstellen. Es gibt ein Beispiel für die Verwendung mit ImmutableJS am unteren Rand der Readme.

Answer 4

Was ist mit so etwas?

export const getWidgetsWithComputedProps = widgets => { 
    return widgets.map(w => getWidgetWithComputedProps(w)); 
}; 

export const selectWidgetType = widget => { 
    switch (widget.type) { 
    case 'line': 
     return 'time-series'; 
    case 'pie': 
    case 'bar': 
     return 'cross-sectional'; 
    default: 
     console.warn('Back up: that type of widget does not exist!', widget.type); 
     return null; 
    } 
}; 

export const getWidgetWithComputedProps = createSelector(
    widget => widget, 
    selectWidgetType, 
    (widget, _type) => { 
    return {...widget, _type} 
    } 
);