'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