我正在编写删除用户的功能。我希望仅在服务器获得肯定结果后才从客户端删除。
我怎样才能用下面的代码做到这一点？
import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
import { useDispatch } from "react-redux";
import useHttp from '../../../hooks/http.hook';
const initialState = {
usersList: [],
usersToDelete: [],
usersLoadingStatus: 'idle',
userDeletingStatus: 'idle',
}
export const fetchUsers = createAsyncThunk(
'users/fetchUsers',
(pageNum) => {
const request = useHttp();
return request(`/admin/users/?page=${pageNum}`);
}
);
export const deleteUser = createAsyncThunk(
'users/deleteUser',
(id) => {
const request = useHttp('DELETE');
return request(`/admin/users/${298}`);
}
)
const usersSlice = createSlice({
name: 'users',
initialState,
reducers: {
deleteUserOnClient: (state, action) => {
console.log(action);
console.log(`action in basic reducer`)
state.usersList = state.usersList.filter(item => item.id !== action.payload.data.id);
}
},
extraReducers: (builder) => {
builder
.addCase(fetchUsers.pending, state => {state.usersLoadingStatus = 'fetching'})
.addCase(fetchUsers.fulfilled, (state, action) => {
state.usersLoadingStatus = 'idle';
state.usersList = state.usersList.concat(action.payload.data);
})
.addCase(fetchUsers.rejected, state => {state.usersLoadingStatus = 'error'});
builder
.addCase(deleteUser.pending, state => {state.userDeletingStatus = 'deleting'})
.addCase(deleteUser.fulfilled, (state, action) => {
console.log(`action id in fulfilled promise ${action.payload.data.id}`)
(deleteUserOnClient(action.payload.data.id));
state.userDeletingStatus = 'idle';
})
.addCase(deleteUser.rejected, state => {state.userDeletingStatus = 'error'})
}
});
const {actions, reducer } = usersSlice;
const {
deleteUserOnClient
} = actions;
export default reducer;
