web-dev-qa-db-ja.com

パラメーターで再選択セレクターを使用する

結合セレクターに追加のパラメーターを渡すにはどうすればよいですか？私は。。をしようとしています

•データを取得する

•データのフィルター

•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)はundefinedを返します

javascriptreactjsecmascript-6reduxreselect
15
Michal

質問への回答は、FAQ here： https://github.com/reactjs/reselect#q-how-do-i-create-a-selector -that-takes-an-argument

要するに、reselectはセレクターに渡される任意の引数をサポートしていません。推奨されるアプローチは、引数を渡す代わりに、同じデータをRedux状態に保存することです。

4
David L. Walsh

セレクタから関数を返すのはどうですか？ getFilteredToDosはその例です

// 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

別のオプション：

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

そして、次のように使用します

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

ただし、この場合のメモ化/パフォーマンスについてはわかりませんが、動作します。

4
Tomas P. R.