尝试使用简单redux reducer设置boolean值时匹配override的错误

zrfyljdw  于 2023-04-21  发布在  其他
关注(0)|答案(1)|浏览(94)

做这个项目是为了帮助自己学习Redux和Typescript,所以仍然在学习曲线上。
根据我在一本书中读到的内容,我有一个“切片”设置,其中包含reducer的定义:

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;
        }
    }
});

第一个reducer(addBookToCart)工作正常,但第二个就不行了,它根本不需要任何参数;它只是设置了一个布尔值开关。但是无论我尝试输入什么,我都会得到一个错误。
下面是相关代码:

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

这是我得到的错误(代码在IDE中编译时立即出现):

ERROR in src/Cart.tsx:64:18

TS2769: No overload matches this call.
  Overload 1 of 3, '(thunkAction: ThunkAction<unknown, { page: { value: string; }; books: { value: Book[]; }; ajax: { value: string; }; cart: { value: Book[]; formShown: boolean; }; }, undefined, AnyAction>): unknown', gave the following error.
    Argument of type 'void' is not assignable to parameter of type 'ThunkAction<unknown, { page: { value: string; }; books: { value: Book[]; }; ajax: { value: string; }; cart: { value: Book[]; formShown: boolean; }; }, undefined, AnyAction>'.
  Overload 2 of 3, '(action: AnyAction): AnyAction', gave the following error.
    Argument of type 'void' is not assignable to parameter of type 'AnyAction'.
  Overload 3 of 3, '(action: AnyAction | ThunkAction<unknown, { page: { value: string; }; books: { value: Book[]; }; ajax: { value: string; }; cart: { value: Book[]; formShown: boolean; }; }, undefined, AnyAction>): unknown', gave the following error.
    Argument of type 'void' is not assignable to parameter of type 'AnyAction | ThunkAction<unknown, { page: { value: string; }; books: { value: Book[]; }; ajax: { value: string; }; cart: { value: Book[]; formShown: boolean; }; }, undefined, AnyAction>'.
    62 |     const showForm = (e : React.MouseEvent<HTMLElement>) => {
    63 |         e.preventDefault();
  > 64 |         dispatch(showForm(true));
       |                  ^^^^^^^^^^^^^^
    65 |      };
    66 |     
    67 |     if (itemList.length) {
6fe3ivhb

6fe3ivhb1#

showForm既是事件处理回调函数的名称,也是动作的名称。切片的语法颜色可能表明showForm动作从未导出(因此从未导入到使用它的组件中)。
showFormaction可以不带参数调用,action参数可以从showForm reducer中移除,所以showForm可以更新如下:

showForm: (state) => {
    state.formShown = true;
}

相关问题