Как вы можете использовать локальное состояние компонента React внутри mapStateToPropsMethod?

Question

У меня есть компонент реагирования, который создает локальное состояние: идентификатор запроса. Этот идентификатор запроса создается при создании компонента и не / не должен передаваться от потребителя компонента. Это состояние используется только в экземпляре компонента и не используется совместно кем-либо еще - поэтому создается впечатление, что уместно быть локальным состоянием в компоненте, а не сохранять его в хранилище с избыточностью.

Реактивный компонент отправляет асинхронное действие через редукс, и когда действие завершается, результат сохраняется в коллекции в состоянии избыточности, которая индексируется указанным выше идентификатором запроса.

В функции mapStateToProps компонентов React я хочу получить результаты запроса из коллекции результатов запроса в состоянии избыточности. Тем не менее, идентификатор запроса для компонента находится только в локальном состоянии экземпляра компонента и, таким образом, явно не доступен из mapStateToProps (поскольку mapStateToProps не является членом класса компонента и, очевидно, не имеет способа доступа к локальному состоянию этого компонента. экземпляр).

Существует ли установленный способ доступа к локальному состоянию компонента React внутри mapStateToProps? Я знаю, что могу хранить это локальное состояние в избыточном (так что оно доступно в mapStateToProps), но кажется, что в этом нет необходимости, поскольку состояние действительно локально для каждого экземпляра компонента. Параметр ownProps выглядел интересно, но, похоже, для этого потребителям моего компонента React необходимо передать значение в реквизитах при создании экземпляра компонента, что не является необходимым (даже запутанным).

Есть ли ожидаемый способ сделать это? Или я разработал свой компонент неправильно, так что я не должен пытаться использовать локальное состояние компонента для правильного сопоставления состояния притока с реквизитом компонента?

Спасибо!

Answer 1

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

Однако вы можете получить эти значения в пределах mapStateToProps, если вы либо поднимете состояние до родительского компонента, а затем передадите его как подпорку дочернему элементу. В таком случае вы можете получить доступ к значению в mapStateToProps, используя аргумент ownProps. Однако нет необходимости перемещать состояние к родителю, если оно только локально для этого конкретного компонента. Аналогично, если состояние перемещается в хранилище с избыточностью.

Лучший способ обработки такого сценария - передать весь набор значений от mapStateToProps компоненту, а затем реализовать запомненный метод, который возвращает результат на основе данных и идентификатора запроса

Ex:

const mapStateToProps = (state, props) => {
   return {
       collection: resultCollectionSelector(state, props)
   }
}

и в методе рендеринга компонентов (вы также можете сделать это в componentDidUpdate и установить значение в состояние, если вам требуется использовать его в методе отдельно от рендеринга)

constructor(props) {
    super(props);
    this.getMemoizedFilteredResult = _.memoize(this.getFilteredResult);
}
getFilteredResult = (collection, query) => {
     // process and return result
}
render() {
    const queryResult = this.getMemoizedFilteredResult(this.props.collection, this.state.query);
    ...
}