'edit function with builder completely not working - what is wrong?
I am using Redux Toolkit for the first time and was fine with the get, post and delete functions. I thought it would be easy to re-tool for the 'put' function, but when I dispatch from the front-end, it is getting reject and returning undefined. I literally have no idea what I'm doing wrong. Any advice is greatly appreciated. Function on the backend first, which works when I use Postman.
const updateOneMember = asyncHandler(async(req,res) => {
const member = await Members.findById(req.params.id)
if(!member) {
res.status(400)
throw new Error("Member not found")
}
const user = await Users.findById(req.user.id)
if(!user) {
res.status(401)
throw new Error("User not found")
}
if(member.user.toString() !== user.id) {
res.status(401)
throw new Error("User not authorized")
}
const updatedMember = await Members.findByIdAndUpdate(req.params.id, req.body, {
new: true,
})
res.status(200).json(updatedMember);
});
In Redux, I have in my member slice this code:
export const memberSlice = createSlice({
name: "members",
initialState,
reducers: {
reset: (state) => initialState,
},
extraReducers: (builder) => {
builder
.addCase(addMember.pending, (state) => {
state.isLoading = true;
})
.addCase(addMember.fulfilled, (state, action) => {
state.isLoading = false;
state.isSuccess = true;
state.members.push(action.payload);
})
.addCase(addMember.rejected, (state, action) => {
state.isLoading = false;
state.isError = true;
state.message = action.payload;
})
.addCase(getMembers.pending, (state) => {
state.isLoading = true;
})
.addCase(getMembers.fulfilled, (state, action) => {
state.isLoading = false;
state.isSuccess = true;
state.members = action.payload;
})
.addCase(getMembers.rejected, (state, action) => {
state.isLoading = false;
state.isError = true;
state.message = action.payload;
})
.addCase(editMember.pending, (state) => {
state.isLoading = true;
})
.addCase(editMember.fulfilled, (state, action) => {
state.isLoading = false;
state.isSuccess = true;
state.members = state.members.map((member) => {
if (member._id === action.payload.id) {
member.name = action.payload;
}
})
})
.addCase(editMember.rejected, (state, action) => {
state.isLoading = false;
state.isError = true;
state.message = action.payload;
})
.addCase(deleteMember.pending, (state) => {
state.isLoading = true;
})
.addCase(deleteMember.fulfilled, (state, action) => {
state.isLoading = false;
state.isSuccess = true;
state.members = state.members.filter( (member) => member._id !== action.payload.id )
})
.addCase(deleteMember.rejected, (state, action) => {
state.isLoading = false;
state.isError = true;
state.message = action.payload;
});
},
});
And in the member service file, I have for the edit function
const editMember = async (memberId, data, token) => {
const config = {
headers: {
Authorization: `Bearer ${token}`,
},
};
const response = await axios.put(`http://localhost:5000/api/me/family/${memberId}`, data, config);
return response.data;
}
The add, get and delete functions all are working, but the edit isn't. It's returning undefined. I have double-checked the URL a million times (and again it works in Postman) and have changed around the state.members function on fulfilled a few ways. Everything is returning undefined. Any ideas? I am really stuck.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
