매개 변수와 함께 다시 선택 선택기 사용

매개 변수와 함께 다시 선택 선택기 사용

조합된 셀렉터에 추가 파라미터를 전달하려면 어떻게 해야 합니까?하려고 합니다.

• 데이터 취득

• 데이터 필터링

• 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

갱신일 : 2022년 2월 16일

선택 4.1의 새로운 솔루션: 상세보기

// selector.js
const selectItemsByCategory = createSelector(
  [
    // Usual first input - extract value from `state`
    state => state.items,
    // Take the second arg, `category`, and forward to the output selector
    (state, category) => category
  ],
  // Output selector gets (`items, category)` as args
  (items, category) => items.filter(item => item.category === category)
);

// App.js
const items = selectItemsByCategory(state, 'javascript');
// Another way if you're using redux hook:
const items = useSelector(state => selectItemsByCategory(state, 'javascript'));

갱신일 : 2021년 3월 6일

재선택 솔루션: 상세보기

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

여기 최신 버전이 있습니다.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>
}

또, 두 번째 파라미터(keep)입니다.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/

질문에 대한 답변은 FAQ(https://github.com/reactjs/reselect#q-how-do-i-create-a-selector-that-takes-an-argument에 자세히 나와 있습니다.

즉, reselect는 셀렉터에 전달되는 임의의 인수를 지원하지 않습니다.인수를 전달하는 대신 동일한 데이터를 Redux 상태로 저장하는 것이 좋습니다.

셀렉터에서 함수를 반환하는 것은 어떻습니까? 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')
});

이에 대해서는 '실렉터의 리액트 프로포트에 액세스하기'에 있는 문서를 다시 선택합니다.

import { createSelector } from 'reselect'

const getVisibilityFilter = (state, props) =>
  state.todoLists[props.listId].visibilityFilter

const getTodos = (state, props) =>
  state.todoLists[props.listId].todos

const makeGetVisibleTodos = () => {
  return createSelector(
    [ getVisibilityFilter, getTodos ],
    (visibilityFilter, todos) => {
      switch (visibilityFilter) {
        case 'SHOW_COMPLETED':
          return todos.filter(todo => todo.completed)
        case 'SHOW_ACTIVE':
          return todos.filter(todo => !todo.completed)
        default:
          return todos
      }
    }
  )
}

export default makeGetVisibleTodos

const makeMapStateToProps = () => {
  const getVisibleTodos = makeGetVisibleTodos()
  const mapStateToProps = (state, props) => {
    return {
      todos: getVisibleTodos(state, props)
    }
  }
  return mapStateToProps
}

이 경우 셀렉터에 전달되는 소품은 React 컴포넌트에 전달되는 소품이지만 소품은 어디에서나 얻을 수 있습니다.

const getVisibleTodos = makeGetVisibleTodos()

const todos = getVisibleTodos(state, {listId: 55})

다시 선택하기 위해 다음 유형을 확인합니다.

export type ParametricSelector<S, P, R> = (state: S, props: P, ...args: any[]) => R;
export function createSelector<S, P, R1, T>(
  selectors: [ParametricSelector<S, P, R1>],
  combiner: (res: R1) => T,
): OutputParametricSelector<S, P, T, (res: R1) => T>;

소품 타입에 제약이 없다는 것을 알 수 있습니다.P입력하다ParametricSelect） so 、 ), ), ), ), ), ), 、object.

다른 옵션:

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

그런 다음 다음과 같이 사용합니다.

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

이 경우 메모화/퍼포먼스는 확실하지 않지만 동작합니다.

언급URL : https://stackoverflow.com/questions/40291084/use-reselect-selector-with-parameters