React：使用钩子从 redux 状态中删除本地状态中的重复数据答案

【问题标题】：React: Remove deduped data from local state from redux state using hooksReact：使用钩子从 redux 状态中删除本地状态中的重复数据
【发布时间】：2019-08-20 03:39:22
【问题描述】：

我有一个反应组件（下面的总结代码）。 react 组件应在单击时在屏幕上显示动画，并将操作发送到 redux 服务器，然后将其远程存储。当远程服务器用新事件更新客户端时，本地组件应该从本地删除匹配的事件，并且只呈现其他用户拥有的事件数量。

但是，我不知道如何从 redux 状态更新组件状态。我可以获得重复的事件，并且我知道要删除哪些事件。但是，如果我使用 setSelfData 更新状态，它会变成一个无限循环，因为 memo 组件仍在更新旧的 redux 状态，它没有被清除。有没有办法使用钩子从 redux 状态更新本地状态？或者，最好让处理按钮点击的 saga 也更新 redux 存储，以便在 reducer 中过滤掉后续通知，以便 mapStateToProps 只接收要呈现的新事件？

type OwnProps = {
    className: string;
}

type ReduxStateProps = {
    widgetData: number[];
}

const MyPanel = React.memo<OwnProps & ReduxStateProps>(({ className, widgetData } ) => {
    const initialData = {
        selfWidgetData = [],
        animationsRequired = 0,
    };
    const [selfData, setSelfData] = useState<DataRenders>(initialData);
    const onButtonClick = () => {
        selfData.selfWidgetData.push(Date.now());
        selfData.animationsRequired = 1;
        setSelfData(selfData);
    };

    if(widgetData && widgetData.length > 0) {
        const {updatedSelfData, updatedAnimationsRequired} = filterDuplicateData(selfData.selfWidgetData, widgetData);
        setSelfData({
            selfWidgetData = updatedSelfData,
            animationsRequired = updatedAnimationsRequired,
        });
    }
    return (
        //render
    );
});

const mapStateToProps = ({...});
const mapDispatchToProps = ({...});
export default connect(mapStateToProps, mapDispatchToProps)(MyPanel);

【问题讨论】：

标签： reactjs react-redux

【解决方案1】：

您可以使用useEffect 的第二个参数仅在widgetData 属性更改时运行您的过滤和状态突变代码，从而防止无限循环：

  useEffect(() => {
    if(widgetData && widgetData.length > 0) {
        const {updatedSelfData, updatedAnimationsRequired} = filterDuplicateData(selfData.selfWidgetData, widgetData);
        setSelfData({
            selfWidgetData: updatedSelfData, // note the change here as well from = to :
            animationsRequired: updatedAnimationsRequired,
        });
    }
  }, [widgetData]);

有关useEffect 和使用第二个参数跳过效果的更多信息，请参阅https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects。

【讨论】：