Смешивание Redux с помощью useEffect Hook - PullRequest
Новая
       15

Смешивание Redux с помощью useEffect Hook

0 голосов
/ 05 августа 2020

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

Во-первых, когда выполняется redux-отправка и некоторые компоненты используют опору через useSelector. Затем, после того, как функциональный компонент уже повторно отрисован, применяется ловушка useEffect, которая обновляет состояние некоторого свойства. Это обновление повторно запускает рендеринг.

Например, в моем случае журнал консоли ниже распечатывается дважды.

Вопрос: следует ли мне удалить useEffect и useState и интегрировать их в хранилище redux? 

import {useSelector} from "react-redux";
import React from "react";


const Dashboard = (props) => {
    const selFilters = useSelector((state) => state.filter.selectedDashboardFilters);
    const [columns, setColumns] = React.useState([]);

    React.useEffect(() => {
            let newColumns = getColumns();
            setColumns(newColumns)
        }, [selFilters]
    )
    
    console.log("RENDER")
    
    return (
        <h1>{columns.length}</h1>
    )
}

1 Ответ

0 голосов
/ 06 августа 2020

Если columns необходимо пересчитывать каждый раз при изменении selFilters, вам почти наверняка не следует пересчитывать его в своем компоненте. Если columns вычисляется из selFilters, вам, вероятно, вообще не нужно сохранять его как состояние. Вместо этого вы можете использовать повторный выбор , чтобы создать селектор getColumns(), который извлекает столбцы из состояния при каждом изменении соответствующего состояния. Например: 

const getColumns = createSelector(
  state => state.filter.selectedDashboardFilters,
  selFilters => {
    // Compute `columns` here
    // ...
    return columns
  }
)
...