使用Redux Reducer设置布尔值时遭遇TS2769重载匹配错误求助

核心问题 #

你组件里定义的事件处理函数showForm，和Redux slice生成的同名showForm action creator重名了。调用dispatch(showForm(true))时，实际调用的是组件内的事件处理函数（它返回void），而非Redux的action creator（它返回标准action对象），导致TypeScript判定参数类型不匹配，抛出TS2769错误。

解决方案 #

1. 重命名组件内的事件处理函数，避免和Redux action creator同名
2. 确保正确导入并使用Redux生成的action creator
3. （可选）优化showForm reducer，去掉无用的action参数

修正后的代码 #

第一步：完善cart slice的导出

const iState: { value: Book[], formShown: boolean } = { value: [], formShown : false };

export const cartSlice = createSlice({
    name : 'cart',
    initialState : iState,
    reducers : {
        addBookToCart : (state, action) => {            
            state.value.push(action.payload);
        },
        showForm: (state) => { // 此处不需要action参数，直接移除
            state.formShown = true;
        }
    }
});

// 必须导出slice生成的action creators
export const { addBookToCart, showForm } = cartSlice.actions;

第二步：修改组件代码

// 导入Redux的action creator，可根据需要起别名避免冲突
import { showForm } from './path/to/your/cartSlice';

// 重命名事件处理函数，比如改为handleShowCheckoutForm
const handleShowCheckoutForm = (e : React.MouseEvent<HTMLElement>) => {
    e.preventDefault();
    dispatch(showForm()); // 因为reducer未用到payload，无需传true
};

if (itemList.length) {
    return (
        <>
            <ul>
                {itemList}
            </ul>
            <p><b>Total Price: ${totalPrice.toFixed(2)}</b></p>
            <br />
            {
                formShown ? <PaymentForm />
                        : <Button variant="success" onClick={handleShowCheckoutForm}>Checkout</Button>
            }
        </>
    );
} 
else {
    return (<p><b>Your Shopping Cart is Empty</b></p>);
}

额外说明 #

你的showForm reducer逻辑只是把formShown设为true，完全不需要接收action.payload，所以调用action creator时不用传任何参数，传了也不会被使用，反而容易造成误解。

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