response-redux useEffect с массивом, поскольку зависимость не всегда обновляется - PullRequest
Новая
       13

response-redux useEffect с массивом, поскольку зависимость не всегда обновляется

1 голос
/ 24 января 2020

Я разрабатываю приложение с React и Redux.
Чтобы быть эффективными, мы нормализуем данные в хранилище. (store[OBJECT_TYPE].byId)

Моя проблема, когда у меня есть объект, который имеет несколько зависимостей. Я должен отправить действие Redux, чтобы получить данные из остальных API.

С массивом зависимостей useEffect:
- Если я добавлю массив artistIds, некоторые компоненты не будут обновлены / перерисованы после загрузки исполнителя.
- Если я не добавлю artistIds У меня есть уродливое предупреждение (реагирующие зацепки / исчерпывающие задержки), но оно работает.

Какова лучшая практика здесь?
- Добавьте комментарий //eslint-disable-next-line, чтобы удалить предупреждение.
- Создайте компонент ArtistLink, который будет самостоятельно обрабатывать отправку. (В этом случае у меня будет много одиночных выборок вместо нескольких)

Вот пример кода, иллюстрирующий проблему (у песни один-много исполнителей). 

function SongCard({ id, name, artistIds = [], ...}) {

    const artists = useSelector(state => artistIds.map(id => state.artists.byId[id] || {}));

    useEffect(() => {
        if (artistIds.length > 0) {
            dispatch(reduxArtistsActions.get(artistIds));
        }
    }, [dispatch, artistIds]); // Here is the problem - With artistIds the re-rendered isn't always correct
    ...

    return <>
        ...
        {artists.map(artist => <a href={artist.id}>{artist.name}</a>)}
        ...
    </>
}
...