Почему мой селектор редукторов работает неправильно?

Question

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

У меня есть этот компонент

const mapStateToProps = ({ data: { complete } }) => ({
    isComplete: complete,
})

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

, поэтому я попробовал это

const checkIfIsComplete = () => createSelector((state, props) => props.data.complete)

const mapStateToProps = () => {
    const getIsComplete = checkIfIsComplete()
    return (state, ownProps) => {
        return {
            complete: getIsComplete(state, ownProps),
        }
    }
}

, однако, это происходит с этой ошибкой: Can't perform a React state update on an unmounted component.

как я могу это исправить компонент, поэтому он вызывает mapStateToProps только тогда, когда это необходимо, и всегда возвращает правильное значение?

Answer 1

Нет, вы не понимаете, как работает mapState. mapState будет всегда вызываться каждый раз, когда изменяется состояние root.

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

Пожалуйста, прочитайте Руководство по использованию React-Redux на mapState для получения инструкций о том, как правильно использовать mapState. В моем посте Использование реселекторных селекторов для инкапсуляции и производительности обсуждается, почему и как использовать реселект.

Answer 2

Вы можете создать свои селекторы следующим образом:

const selectData = state => state.data;

const selectIsComplete = createSelector(
  selectData,
  (data) => data.complete
)

const mapStateToProps = createSelector(
  selectIsComplete,
  //only create a new object with complete property
  //  if complete changes
  complete=>({complete})
)

Компонент будет по-прежнему визуализироваться при изменении ownProps, но при условии, что у него нет ownProps, тогда он будет визуализироваться только после завершения изменений.