Используете компонент prop внутри тела функции реселекта?

Question

Честно говоря, после нескольких часов исследований я совершенно не понимаю повторного выбора, поэтому я просто спрашиваю, зачем он мне нужен и может ли он помочь.

Селекторы эффективны.Селектор не пересчитывается, пока не изменится один из его аргументов.

Немного неясно, что мы подразумеваем под argument здесь, но я предполагаю, что это не состояние избыточности, потому что иначеНе может быть никакого смысла в повторном выборе.

Моя цель - не вычислять весь список каждый раз, когда что-то происходит, потому что он может содержать тысячи элементов.

Первый вопрос: если, например,например, значение state["2"] меняется на 4, оно будет проходить через весь список?

//for an example, in the next list, the key is the child,
//and the value is it's parent
const state = {
  1: 5,
  2: 5,
  3: 2,
  4: 1,
  5: 10,
  //...
  1000: 342
};

//and we have to find all children of a specific element,
//what we get from the component's own props

const getState = (
  state,
  props //okay, I can access it here
) => state;

const getChildren = createSelector(
  [getState],
  state => Object.keys(state).filter(child => {
    const parent = state[child];

    return parent === props.id //but I need it here
  })
);

const mapStateToProps = (state, props) = ({ children: getChildren(state, props) });

И главный вопрос: как я могу получить доступ к подпоркам внутри тела функции?

Answer 1

Вы можете передать аргумент props непосредственно другому селектору getChildren, и вам не нужен первый getState, подобный этому:

const getChildren = createSelector(
   [
      state => state,
      props => props
   ], (state, props) => {...}

Об уточнении вариантов использования для повторного выбора: он делает перерасчет, если состояние или реквизит изменяются (любой аргумент). Так зачем его использовать? Я использую это по 2 причинам

1. вы можете объединить части состояния, приходящие от нескольких редукторов, создать то, что мы можем назвать «метаредуктором», и передать его вашему компоненту. Таким образом вы размещаете этот код только в одном месте (селектор) и можете повторно использовать его в разных компонентах. Представьте, что каждый редуктор похож на таблицу базы данных, а селектор - на результат запроса. Вы можете запросить что угодно из своего состояния и сохранить результат в кэше для производительности.
2. вместо запуска этой логики на mapStateToProps, который запускается каждый раз при визуализации компонента (независимо от того, изменилось ли состояние), вы запускаете его только 1 раз за изменение состояния и получаете кэшированную версию, если компонент . повторно выводит Это происходит, например, если дочерний компонент рендерит только потому, что его родительский рендеринг отображен, но часть состояния, связанная с его селектором, не изменилась. Поэтому мне нравится все время использовать селекторы вместо прямого доступа к состоянию редукса.

Answer 2

Вот типичный поток.

У вас будет несколько ConnectedComponent, которые подключены к connect, и его mapStateToProps вызывает селектор с state и ownProps.

У вас есть индивидуальные селекторы для получения id из props и ваших объектов из state.

Использование ConnectedComponent

<span>
    <ConnectedComponent id="123" />
</span>

mapStateToProps (ConnectedComponent)

import {connect} from 'react-redux'
import {getMyObjectSelector} from './selectors';

const mapStateToProps = (state, ownProps) => ({
    myObject: getMyObjectSelector(state, ownProps)
});

export default connect(mapStateToProps)(Component)

селекторы

const getIdFromProps = (state, props) => props.id
const getMyObjectsFromState= state => state.myObjects;

export getMyObjectSelector = createSelector(
   getMyObjectsFromState,
   getIdFromProps,
   (objects, id) => objects[id]
);

Компонент

export const Component = ({myObject}) => (
   <span>
   // Do stuff
   </span>
)