如何在不触发组件重渲染的情况下在事件监听中使用Redux Store值？

当然可以避免这种不必要的重渲染，核心思路就是不要在组件渲染阶段订阅bananaId的变化，而是在需要用到它的时候（也就是点击按钮时）再去获取最新值。下面给你两种实用的实现方式：

方式一：点击时直接从Store获取最新值 #

通过useStore钩子拿到Redux Store实例，在点击事件里调用getState()获取当前的bananaId，这样组件不会订阅这个值的变化，自然不会因为它改变而重渲染：

import { useDispatch, useStore } from 'react-redux';

const ExampleComponent = () => {
    const dispatch = useDispatch();
    const store = useStore();

    const onButtonClick = () => {
        // 点击时才获取最新的bananaId
        const bananaId = store.getState().someSlice.bananaId;
        dispatch(deleteFruit({ id: bananaId }));
    }
    
    return <button onClick={onButtonClick}>ClickMe</button>
}

方式二：用Thunk Action封装逻辑 #

把获取bananaId和分发动作的逻辑封装到Thunk Action里，组件只需要调用这个封装好的action，完全不用关心状态的获取：

首先定义Thunk Action：

// 假设这是你的action文件
export const deleteBanana = () => (dispatch, getState) => {
    // 在Thunk内部获取最新的bananaId
    const bananaId = getState().someSlice.bananaId;
    dispatch(deleteFruit({ id: bananaId }));
}

然后在组件里使用：

import { useDispatch } from 'react-redux';
import { deleteBanana } from './your-action-file';

const ExampleComponent = () => {
    const dispatch = useDispatch();

    const onButtonClick = () => {
        // 直接调用封装好的Thunk Action
        dispatch(deleteBanana());
    }
    
    return <button onClick={onButtonClick}>ClickMe</button>
}

这种方式更符合Redux的最佳实践，把状态相关的逻辑从组件中抽离出来，组件只负责UI交互，后期维护也更方便。

不管用哪种方式，都能彻底避免bananaId变化导致的无意义重渲染，尤其适合大量实例或复杂组件的场景。

内容的提问来源于stack exchange，提问作者EKW