Зная, когда состояние карты реквизит обновления

Question

В компоненте «Реакция и редукция запуска» у меня есть следующее приложение

в компоненте. Я использую серию селекторов, связанных с одним и тем же магазином. Элементы:

const mapStateToProps = (state: RootState) => ({
    itemsLoading: ItemsSelectors.getItemsIsLoading(state),
    items: ItemsSelectors.getCurrentItemList(state),
    fields: ItemsSelectors.getCurrentItemFields(state),
    columns: ItemsSelectors.getCurrentItemColumns(state)
})

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

Я использую следующую функцию

UNSAFE_componentWillUpdate(nextProps) {
    const displaybleTable = this.getDisplaybleTable(nextProps);
    this.setState({
        items : displaybleTable.items,
        columns : displaybleTable.columns
    })
}

Так что каждый раз, когда меняются хранилища, яобновляется, и я обновляю состояние компонента.

Проблема в том, что, поскольку я обновляю состояние компонента, я зацикливаюсь на этой функции.

Кроме того, я считаю, что это выглядит немного странно.

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

Answer 1

Какую версию реакции вы используете?

Если я вас правильно понял и предположил, что реагирует версия 16.8+, вы можете добиться этого с помощью хука useEffect () . Я предполагаю, что ваш компонент подключен к хранилищу с помощью connect () из'act-redux '. Тогда это может выглядеть так:

const MyComponent = (props) => {

    useEffect(() => {
        const displaybleTable = this.getDisplaybleTable(/* arguments */);
        this.setState({
            items : displaybleTable.items,
            columns : displaybleTable.columns
        })
    }, [props.items])

    const getDisplayableTable = (/* args: any */) => {
        return ...
    }

    ...
}

export const MyConnectedComponent = connect(
    (state: RootState) => ({
        itemsLoading: ItemsSelectors.getItemsIsLoading(state),
        items: ItemsSelectors.getCurrentItemList(state),
        fields: ItemsSelectors.getCurrentItemFields(state),
        columns: ItemsSelectors.getCurrentItemColumns(state)
    }),
    {
        // dispatchProps ... 
    },
    (stateProps: any, dispatchProps: any, ownProps: any) => ({
        itemsLoading: stateProps.itemsLoading,
        items: stateProps.items,
        fields: stateProps.fields,
        columns: stateProps.columns
    })
)(MyComponent)

Второй параметр useEffect определяет, когда useEffect () вызывает первый параметр, который является функцией. Таким образом, каждый раз, когда «элементы» обновляются в магазине, обновление будет запускать useEffect, который будет запускать код и устанавливать состояние вашего компонента.

EDIT:

ComponentWillUpdate (nextProps) не будет вызываться, если некоторые значения в вашем магазине изменятся. ComponentWillUpdate вызывается только в том случае, если изменились реквизиты, которые вы передаете компоненту:

export const SomeOtherComponent = (props: any) => {
    return (
        <MyComponent prop1={val1} prop2={val2} />
    )
}

При изменении val1 и val2 это вызовет ComponentWillUpdate из MyComponent (насколько я знаю, но я не уверен).