Я учусь реагировать и сокращаться. Я создаю приложение todo, но столкнулся с проблемой. Допустим, у нас есть список как
Список. js
import React from 'react'
function List() {
return (
<div>
<ListItem>Text</ListItem>
<ListItem>Text</ListItem>
<ListItem>Text</ListItem>
<ListItem>Text</ListItem>
</div>
)
}
export default List
Тогда мы имеем ListItem. js
import React, { useState, useEffect } from "react";
import { useSelector } from "react-redux";
function ListItem() {
//This is some local state
const [isLoading, setLoading] = useState(false);
const loading = useSelector(state => state.loading);
// This is the loading flag which is coming from the reducer.. Which will be either true or false
useEffect(() => {
setLoading(true);
}, [loading]);
//Whenever the loading flag from the reducer changes, it changes the local state
return <div>{isLoading ? "loading" : "Hey, Im a list item"}</div>;
}
export default ListItem;
И скажем, все компоненты listItem имеют обработчик щелчков, который dispatch выполняет действие по изменению флага загрузки в редукторе. Теперь проблема 1016 *, с которой я сталкиваюсь, заключается в том, что все listItem прослушивают / подписываются на один и тот же редуктор, всякий раз, когда изменяется флаг isLoading в редукторе, все запускаются listItem показывает загрузку, которая условно отображается из оператора return, как показано выше. Ожидаемое поведение (или предполагаемое поведение, которое я должен сказать) Я хочу показать loading только для того элемента, который был нажат и локальное состояние которого было изменено. Но, к сожалению, в моей логике c есть недостаток, заключающийся в том, что локальные состояния всех элементов изменяются при изменении флага isLoading в редукторе