Redux Toolkit favoriting feature

JavaScript
1

Hello amazing community! For a project I’m working on, I’m implementing a favs feature with Redux Toolkit. On the backend it works, already tested it out with Postman; however I’m having trouble figuring out what’s the problem with the frontend. Here’s my code:

service.js (this snippet generates an Axios PUT request, with data that is supposed to be an object

...
export const toggleFavorite = (id, data) => {
  return http.put(`/api/graffiti/${id}`, data);
};

slice.js

export const toggleFavorite = createAsyncThunk(
  "graffiti/toggleFavorite",
  async (id, data) => {
    const res = await GraffitiService.toggleFavorite(id, data);
    return res.data;
  }
);
...
const graffitiSlice = createSlice({
  name: "graffiti",
  initialState: { items: [], loading: false, errorMessage: "" },
  reducers: {},
  extraReducers: {
    ...
    [toggleFavorite.pending]: (state, action) => {
      state.loading = true;
    },
    [toggleFavorite.rejected]: (state, action) => {
      state.errorMessage = action.error.message || "Couldn't change fav status";
      state.loading = false;
    },
    [toggleFavorite.fulfilled]: (state, action) => {
      const index = state.items.findIndex(
        (graffiti) => graffiti.id === action.payload.id
      );
      
      state.items[index].isFavorite = !state.items[index].isFavorite;
      return state;
    },
  },
});

React dispatching component (the object in the store is actually a GeoJSON, so the properties of it are actually in the .properties object)

const Home = () => {
  const dispatch = useDispatch();
  const graffiti = useSelector((state) => state.graffiti.items)[0];
  ...
  const toggleFavoriteClick = (id, data) => {
    dispatch(toggleFavorite(id, data));
  };

  return (
  ...
  {graffiti.map(paint => (
    <Button
      onClick={() => {
        toggleFavoriteClick(paint.properties.id, {
          isFavorite: !paint.properties.isFavorite,
            }).then(() => console.log("done"));
       }}
     >
     Toggle
     </Button>
)}

Whenever I dispatch the action, I receive back a 500, and I’m having trouble understanding why. Can someone please help me with this?

UPDATE: from the body I receive in the backend, I see that Axios is not sending the object I specify, but another one with the fields requestId and signal. Has anybody ever experienced this?

2

I assume that that is the data variable? Can you log that out right before the PUT? can you confirm in devtools what is being sent? Can you replicate this with something like Postman?

3

Yes, I did all of that, and I narrowed the problem down to Redux Toolkit; I’m using createAsyncThunk method to build an asynchronous action, however looks like I did something wrong and instead of sending the actually wanted payload, I’m sending some sort of config options

4

I don’t know, I’m trying to understand where this is coming from. If you log out from inside the thunk, what do you get?

Another possibility is if you are mutating that data after the thunk starts - it is just a reference. Can you make a deep clone of the object before sending to see if there is an effect?

Do you have a repo for this?

5

I solved it, I was passing the wrong arguments to the dispatcher, so it was interpreting one of them as something else. I have another problem, but in case I can’t figure it out I will open another thread. Thank you for taking interest!

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.