2017-04-14 6 views
1

Ich bin neu bei Selektoren. Ich habe die folgenden ein erstellt:Redux/Neuauswahl - Wiederverwendung des Selektors

import { createSelector } from 'reselect'; 

const getValues = (state) => state.grid; // [3, 4, 7, 3, 2, 7, 3,...] 
const getTiles = (state) => state.tiles; // [0, 1, 0, 1, 0, 0, 1,...] 

// counts selected tiles (ie. adds up all the 1s) 
export const getSelected = createSelector(
    [getTiles], 
    tiles => tiles.reduce((acc, elem) => acc + elem, 0) 
); 

// displays only values of selected tiles, for the rest it shows 0 
export const showSelected = createSelector(
    [getTiles, getValues], 
    (tiles, grid) => tiles.map((idx, i) => (idx === 1 ? grid[i] : 0)) 
); 



    export const addSelected = createSelector(
    [showSelected] 
    ..... 
); 

/* 
export const addSelected = createSelector(
    [showSelected], 
    coun => coun.reduce((acc, elem) => acc + elem, 0) 
); 

*/ 

Der dritte Selektor (addSelected - der letzte Boden, kommentierte-out-Version) im Grunde macht das Gleiche wie die erste (mit verschiedenen Eingängen). Wie kann ich es generischer machen, damit ich es wiederverwenden kann, anstatt die gesamte "reduce" -Linie wieder zu schreiben?

Antwort

1

Sie könnten nur der Teil in seine eigene Funktion wie diese reduzieren extrahieren:

import { createSelector } from 'reselect' 

... 

// addElements adds all elements from given array 
const addElements = elements => 
    elements.reduce((acc, elem) => acc + elem, 0) 

export const getSelected = createSelector([getTiles], addElements) 

export const addSelected = createSelector([showSelected], addElements) 

Ich hoffe, das war hilfreich.

Verwandte Themen