Question

当我从子组件中分派一个动作来触发Redux存储中的更改时，整个树都将重新渲染，包括子组件本身。我该怎么阻止？

例如...

1-我正在侦听用户单击子组件以展开它的情况。

const [expanded, setExpanded] = useState(false);
<span onClick={() => setExpanded(!expanded)}>Expand</span>

2-然后，如果expanded为真，则在useEffect中调度一个动作...

useEffect(() => {
    if (expanded) {
        dispatch(asyncGetItems())
    }
}, [expanded]);

3-然后在异步调度中，它根据返回的数据更改redux存储...

export const getItems = (items: {}): AppActions => {
    return {
        type: GET_ITEMS,
        payload: items,
    };
};

export const asyncGetItems = () => {
    return async (dispatch: any, getState: () => AppState) => {
        try {
            const { data } = await apiGetItems();
            dispatch(getItems(data));
        } catch (error) {
            handleResponseError(error);
        }
    };
};

现在，当我执行此操作并更改存储中的数据时，由于重新渲染了其父项，因此该组件被重新渲染，如何停止呢？

我试图像这样使用memo，但是没有用...

export default memo(MyComponent);

当我在商店中不做任何更改而只返回这样的数据时...

export const asyncGetItems = () => {
    return async (dispatch: any, getState: () => AppState) => {
        try {
            const { data } = await apiGetItems();
            return data;
        } catch (error) {
            handleResponseError(error);
        }
    };
};

该组件不会重新呈现。

Redux存储更改时如何停止组件重新渲染

0 个答案: