使用带参数的重新选择选择器

IT技术 javascript reactjs ecmascript-6 redux reselect
2021-05-10 20:16:58

如何将附加参数传递给组合选择器?我在尝试着

• 获取数据

• 过滤数据

• 将自定义值添加到我的数据集/按 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

4个回答

您的问题的答案在此处的常见问题解答中有详细说明:https : //github.com/reactjs/reselect#q-how-do-i-create-a-selector-that-takes-an-argument

简而言之, reselect 不支持传递给选择器的任意参数。推荐的方法是,在您的 Redux 状态中存储相同的数据,而不是传递参数。

更新时间:2021 年 3 月 36 日

Reselector的解决方案: 查看详细信息

// selector.js
import { createSelector } from 'reselect'
import memoize from 'lodash.memoize'

const expensiveSelector = createSelector(
  state => state.items,
  items => memoize(
    minValue => items.filter(item => item.value > minValue)
  )
)

// App.js
const expensiveFilter = expensiveSelector(state)
// Another way if you're using redux:
// const expensiveFilter = useSelector(expensiveSelector)

const slightlyExpensive = expensiveFilter(100)
const veryExpensive = expensiveFilter(1000000)

老的:

这是我的方法。创建一个带参数和返回函数的函数reselect

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

const data = selectWithValue('myValue')(myState);

从选择器返回一个函数怎么样?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')
});

这是一个带有最新useSelector钩子的。

重要的是从输入选择器中获取参数。输入选择器的第二个参数是我们获取它的方式。

这是选择器的外观,

const selectNumOfTodosWithIsDoneValue = createSelector(
  (state) => state.todos,
  (_, isDone) => isDone, // this is the parameter we need
  (todos, isDone) => todos.filter((todo) => todo.isDone === isDone).length
)

这是我们如何使用useSelector钩子提取值

export const TodoCounterForIsDoneValue = ({ isDone }) => {
  const NumOfTodosWithIsDoneValue = useSelector((state) =>
    selectNumOfTodosWithIsDoneValue(state, isDone)
  )

  return <div>{NumOfTodosWithIsDoneValue}</div>
}

此外,尽可能将第二个参数 ( isDone)保留原始值(字符串、数字等)。因为,重新选择,只有在输入选择器值改变时才运行输出选择器。这种变化是通过浅比较来检查的,对于对象和数组等参考值,这种比较总是错误的。

参考:

  1. https://react-redux.js.org/next/api/hooks#using-memoizing-selectors
  2. https://flufd.github.io/reselect-with-multiple-parameters/
  3. https://blog.isquaredsoftware.com/2017/12/idiomatic-redux-using-reselect-selectors/