单击按钮时效果函数无法呈现

Question

我的Effect函数中有这个函数，用于对后端进行API调用：

export function UpdateGroup(groupId: string, data: { name: string; desc: string; visibility: string, owners: string[], isApproved?: boolean, isRejected?: boolean, photo?: any }): Effect {
// console.log(data)
return async function (dispatch) {
try {
dispatch(loadingAction(true));
api
.update({
resource: `siteGroups`,
id: groupId,
data: {
name: data.name,
desc: data.desc,
visibility: data.visibility,
owners: data.owners,
isApproved: data.isApproved,
isRejected: data.isRejected
// photo: data.photo,
},
})
.then((res) => {
dispatch(FetchSiteGroup(groupId));
})
.catch((err) => new Error(err));
} catch (err) {
console.error(err);
dispatch(loadingAction(false));
}
};
}

这就是api.update方法的样子：

update(payload: { resource: string; id: string; data: any; query?: any }) {
return http.put(`${payload.resource}/${payload.id}`, payload.data, {
params: payload.query,
});
}

行动类型：

export function fetchSiteGroupAction(group: ISiteGroup): ActionsType {
return {
type: ActionsEnum.FETCH_SITEGROUP,
payload: group,
};
}

减速器：

export function Reducer(state = initialState, action: ActionsType) {
switch (action.type) {
case ActionsEnum.LOADING:
return produce(state, (draft) => {
draft.loading = action.payload;
});
case ActionsEnum.AUTH_SUCCESS:
return produce(state, (draft) => {
draft.token = action.payload.token;
draft.user = action.payload.user;
draft.isAdmin =
action.payload.user.roles.find((r) => r === "admin") !== undefined;
draft.loading = false;
});
case ActionsEnum.LOGOUT:
return produce(state, (draft) => {
draft.token = "";
draft.loading = false;
});
case ActionsEnum.FETCH_MEMBERS:
return produce(state, (draft) => {
draft.members = action.payload;
draft.loading = false;
});
case ActionsEnum.FETCH_SITEGROUP:
return produce(state, (draft) => {
draft.siteGroup = action.payload;
// draft.loading = false;
});
default:
return state;
}
}

当在模式卡上选择Ok功能时，在此处调用该功能：

import { UpdateGroup } from "../store/Effects";

<Modal
title=""
visible={isModalVisible}
onOk={(e) => {
// e.preventDefault();
// ApproveGroup(groupInfo.groupId, { isApproved: true })
// console.log(groupInfo);
UpdateGroup(groupInfo.groupId, { name: groupInfo.displayName, desc: groupInfo.description, visibility: groupInfo.visibility, owners: groupInfo.owners, isApproved: true, isRejected: false })
// approveGroup(groupInfo.groupId, groupInfo)
handleCancel()
}}
onCancel={handleCancel}>
This group <b>({groupInfo.displayName})</b> will now be approved
</Modal>   <Modal
title=""
visible={isRejectModalVisible}
onOk={(e) => {
// ApproveGroup(groupId, { isApproved: true })
e.preventDefault();
// console.log("Rejected");
UpdateGroup(groupInfo.groupId, { name: groupInfo.displayName, desc: groupInfo.description, visibility: groupInfo.visibility, owners: groupInfo.owners, isApproved: false, isRejected: true });
setIsRejectModalVisible(false);
}}
onCancel={handleRejectCancel}>

<p>This group <b style={{ color: "red" }}>({groupInfo.displayName})</b> will now be rejected
</p>
Comment: <Input.TextArea rows={4} />
</Modal>

groupInfo内容是从更新的状态中获取的

Answer 1

我要冒险说，你只是没有在对dispatch的调用中包装你的UpdateGroup动作创建者。这可以通过几种方式来实现。

使用connect高阶分量

import { connect } from 'react-redux';
import { UpdateGroup } from "../store/Effects";
...
<Modal
title=""
visible={isModalVisible}
onOk={(e) => {
props.UpdateGroup(
groupInfo.groupId,
{
name: groupInfo.displayName,
desc: groupInfo.description,
visibility: groupInfo.visibility,
owners: groupInfo.owners,
isApproved: true,
isRejected: false,
},
);
handleCancel()
}}
onCancel={handleCancel}
>
...
const mapDispatchToProps = {
UpdateGroup,
};
export connect(null, mapDispatchToProps)(ComponentWithModal);

使用useDispatch反作用挂钩

import { useDispatch } from 'react-redux';
import { UpdateGroup } from "../store/Effects";
...
const dispatch = useDispatch();
<Modal
title=""
visible={isModalVisible}
onOk={(e) => {
dispatch(
UpdateGroup(
groupInfo.groupId,
{
name: groupInfo.displayName,
desc: groupInfo.description,
visibility: groupInfo.visibility,
owners: groupInfo.owners,
isApproved: true,
isRejected: false,
},
),
);
handleCancel();
}}
onCancel={handleCancel}
>
...
export ComponentWithModal;