Effect function failed to render on click of a button - reactjs

Question

I have this function in my Effect functions to make an API call to the backend:
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));
}
};
}
This is what the api.update method looks like:
update(payload: { resource: string; id: string; data: any; query?: any }) {
return http.put(`${payload.resource}/${payload.id}`, payload.data, {
params: payload.query,
});
}
The Action Type:
export function fetchSiteGroupAction(group: ISiteGroup): ActionsType {
return {
type: ActionsEnum.FETCH_SITEGROUP,
payload: group,
};
}
The Reducer:
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;
}
}
The function is called here when the Ok function is selected on the Modal card:
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>
The groupInfo content is gotten from a state which was updated from the

Answer 1

I'm going to go out on a limb and say you just haven't wrapped your UpdateGroup action creator in a call to dispatch. This can be done in a couple ways.
Using connect Higher Order Component
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);
Using useDispatch react hook
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;