How to retrieve object after post in react redux from api

Question

I created a Todo application in React.js. I have an API to store my todos and their states.

In my application I can drag and drop the todos in the state I want and I can also CRUD the states. For the state part I use React-Redux.

My problem happens when adding a new state, I would like to get the id that is provided by the API but in my reducer I get this error: A non-serializable value was detected in the state, in the path: stateReducer.

If I don't get the id, I can't delete the state cause I delete by id, I have to reload the page.

To initialize my state list I use a middleware to do the asymmetric part but I don't understand how to do it when I add a new object.

import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
import  Api  from "../api/Api.ts";

const api = new Api("http://localhost:3333/api/state/")

const initialState = {
    status:'idle',
    list:[],
    error: null
}

export const StateSlice = createSlice({
    name:'status',
    initialState,
    reducers: {
        add: async (state, action) => {
            let item
            await api.post(action.payload).then(state => item = state) // PROBLEME 
            state.list.push(item) 
        },

        remove:(state, action) => {
            state.list.splice(state.list.indexOf(action.payload),1)
            api.del(action.payload)
        },

        update:(state, action) => {
            api.update(action.payload)
        },

        get: async (state,action) => {
            state.list = action.payload
        },
    },

    extraReducers(builder) {
        builder
          .addCase(fetchPosts.pending, (state, action) => {
            state.status = 'loading'
          })
          .addCase(fetchPosts.fulfilled, (state, action) => {
            state.status = 'succeeded'
            state.list = state.list.concat(action.payload)
          })
          .addCase(fetchPosts.rejected, (state, action) => {
            state.status = 'failed'
            state.error = action.error.message
          })
    }
})

const getPosts = async () => {
    const states = []
    let posts = await api.get()
    posts.forEach(p => {
        states.push({id:p.id,name:p.name})
    });
    return states
}

export const fetchPosts = createAsyncThunk('state/fetchPosts', async () => {
    let response = await getPosts()
    return response
})

export const {add, remove, update, get} = StateSlice.actions

export default StateSlice.reducer;

Do I need to create another middleware for this and how call it ? I am new to this technology, can you give me a hint please?

How to retrieve object after post in react redux from api

0 Answers0