2016-07-30 13 views
21

Ich versuche, diese code in redux-sagaWas sind Selektoren in redux?

export const getUser = (state, login) => state.entities.users[login] 
export const getRepo = (state, fullName) => state.entities.repos[fullName] 

, die in der Saga wird dann wie this verwendet zu folgen: von dem, was

import { getUser } from '../reducers/selectors' 

// load user unless it is cached 
function* loadUser(login, requiredFields) { 
    const user = yield select(getUser, login) 
    if (!user || requiredFields.some(key => !user.hasOwnProperty(key))) { 
    yield call(fetchUser, login) 
    } 
} 

Diese getUser Minderer (es wird auch ein Reduktions) sieht ganz anders aus Ich würde normalerweise erwarten, dass ein Reducer so aussehen würde.

Kann jemand erklären, was ein Selektor ist und wie getUser ein Reducer ist und wie es mit Redux-Saga passt?

+1

Dieses Video von Dan Abramov behandelt die Motivation und die Konventionen, die er bei der Definition von Selektoren verwendet, zumindest zum Zeitpunkt der Erstellung dieses Videos. https: // Eierkopf.io/Lektionen/Javascript-Redux-Colocating-Selektoren-mit-Reduzierungen –

Antwort

29

getUser ist kein Reduzierer, es ist in der Tat ein Selektor, das heißt, eine Funktion, die weiß, wie man ein bestimmtes Stück Daten aus dem Speicher extrahiert.

Selektoren eine zusätzliche Schicht so vor, dass, wenn Sie Ihre Speicherstruktur und ganz plötzlich Ihre users bei state.entities.users waren nicht mehr verändert, sondern bei state.users.objects.entities (oder was auch immer), dann nur Sie die getUser Wähler aktualisieren müssen und nicht an jedem Ort in deiner App, an dem du dich auf den alten Ort bezogen hast.

Das macht sie besonders praktisch, wenn es um die Umgestaltung Ihres Redux-Stores geht.

6

Selektoren sind Getter für den Redux-Zustand. Wie Getter kapseln Selektoren die Struktur des Zustands ein und sind wiederverwendbar. Selektoren können auch abgeleitete Eigenschaften berechnen.

Sie können Selektoren schreiben, wie Sie sie in redux-saga gesehen haben. Zum Beispiel:

const getUsersNumber = ({ users }) => users.length; 

const getUsersIds = ({ users }) => users.map(({ id }) => id); 

etc ...

Sie auch reselect verwenden können, die ein einfaches „Selektor“ Bibliothek für Redux ist, dass memoize Selektoren, um sie effizienter zu gestalten.

0

Selektoren sind Funktionen, die den Redux-Status als Argument annehmen und einige Daten zurückgeben, die an die Komponente übergeben werden.

const getUserData = state => state.user.data; 

Warum sollte es verwendet werden?

  1. Einer der Hauptgründe besteht darin, doppelte Daten in Redux zu vermeiden.
  2. Die Form Ihres Datenobjekts ändert sich mit wachsender Anwendung, anstatt Änderungen an allen Komponenten vorzunehmen. Es ist sehr empfehlenswert/einfacher, die Daten an einer Stelle zu ändern.
  3. Wahlschalter sollten in der Nähe von Reduzierstücken sein, da sie im gleichen Zustand arbeiten. Daten können einfacher synchronisiert werden.

Mit reselect helfen Daten Bedeutung memoize, wenn die gleiche Eingabe an die Funktion übergeben wird, gibt das vorherige Ergebnis eher als again.So neu zu berechnen, dies verbessert die Anwendungsleistung.