web-dev-qa-db-fra.com

Utiliser le sélecteur de resélection avec les paramètres

Comment passer des paramètres supplémentaires aux sélecteurs combinés? J'essaie de

• Obtenez des données

• Filtrer les données

• Ajouter une valeur personnalisée à mon ensemble de données/données de groupe par myValue

export const allData = state => state.dataTable
export const filterText = state => state.filter.get('text')

export const selectAllData = createSelector(
  allData,
  (data) => data
)

export const selectAllDataFiltered = createSelector(
  [ selectAllData, filterText ],
  (data, text) => {
    return data.filter(item => {
      return item.name === text
    })
  }
)

export const selectWithValue = createSelector(
  [ selectAllDataFiltered ],
  (data, myValue) => {
    console.log(myValue)
    return data
  }
)

let data = selectWithValue(state, 'myValue')

console.log(myValue) renvoie undefined

javascriptreactjsecmascript-6reduxreselect
15
Michal

La réponse à vos questions est détaillée dans un FAQ ici: https://github.com/reactjs/reselect#q-how-do-i-create-a-selector -qui-prend-un-argument

En bref, reselect ne prend pas en charge les arguments arbitraires transmis aux sélecteurs. L'approche recommandée est, au lieu de passer un argument, de stocker ces mêmes données dans votre état Redux.

4
David L. Walsh

qu'en est-il du retour d'une fonction depuis le sélecteur? getFilteredToDos en est un exemple

// redux part
const state = {
  todos: [
    { state: 'done',     text: 'foo' },
    { state: 'time out', text: 'bar' },
  ],
};

// selector for todos
const getToDos = createSelector(
  getState,
  (state) => state.todos,
);

// selector for filtered todos
const getFilteredToDos = createSelector(
  getToDos,
  (todos) => (todoState) => todos.filter((toDo) => toDo.state === todoState);
);

// and in component
const mapStateToProps = (state, ownProps) => ({
  ...ownProps,
  doneToDos: getFilteredToDos()('done')
});
4
ColCh

Une autre option:

const parameterizedSelector = (state, someParam) => createSelector(
  [otherSelector],
  (otherSelectorResult) => someParam + otherSelectorResult
);

Et puis utiliser comme

const mapStateToProps = state => ({
  parameterizedSelectorResult: parameterizedSelector(state, 'hello')
});

Je ne suis pas sûr de la mémorisation/des performances dans ce cas, mais cela fonctionne.

4
Tomas P. R.