How to remove data from db using redux?

Question

I've been trying to implement redux and I can post data into the database using redux, and then fetching the results in react. But I'm having difficulty on how to approach the reducer and implementing a delete case.

I had previously attempted to use a function that would delete data in the database through sqlite, but with mixed results. If my memory serves me correct, I could possibly use a prototype method to remove the data from the database, without mutating the state.

 import request from 'superagent'

 export function receiveData(data) {
     return {
         type: 'RECEIVE_DATA',
         payload: data
     }
 }

 export function fetchData() {
     return (dispatch) => {
         request.get('/api/v1/data')
         .then((res) => {
             return res.body
         }).then(data => {
             dispatch(receiveCats(data))
         })
     }
 }


function reducer(state = [], action) {
    switch (action.type) {
        case 'RECEIVE_DATA':
            return action.payload
        case 'ADD_DATA':
            return action.add
        default:
            return state
    }   
}

// case 'DELETE_CAT':
////// return action.del
// to be added

export default reducer

    export function addData(data) {
        return dispatch => {
            request
            .post('/api/v1/data')
            .send(data)
            .end((err, res) => {
                if (err) {
                    console.error(err.message)
                    return
                }
                dispatch(addDataAction(data))
            })
        }
    }

    function addDataAction() {
        return {
            type: 'ADD_DATA',
            payload: {
                name: name,
                // age: age,
                // address: address
            }
        }
    }

I want to understand how redux works but this a hurdle for me.

Any help would be much appreciated. Thanks.

I suspect it is the payload of data? But I'm quite unsure honestly. — winnieTheWind
– winnieTheWind, Commented Jan 9, 2019 at 4:21
You said you completed add and update case, so add your code here — Just code
– Just code, Commented Jan 9, 2019 at 4:22
It's better to add a middleware for your dispatched actions and do the db async operation there. Checkout Epic or Saga to get a better ida. Your reducer should not mutate the state. — Van
– Van, Commented Jan 9, 2019 at 4:25

TRomesh · Accepted Answer · 2019-01-09 04:37:23Z

1

Assuming that you have implemented the delete/remove api which returns the deleted the ID

  function reducer(state = [], action) {
            switch (action.type) {
                case 'RECEIVE_DATA':
                    return Object.assign({},state, {data:action.payload});
                case 'ADD_DATA':
                    return Object.assign({},state, data.concat(action.add));
                case 'REMOVE_DATA':
                    return Object.assign({},state, 
                   {data:state.data.filter((obj)=>obj.id!==id)});
                default:
                    return state
            }   
        }

Try something like this always remember to use the concept of immutability. In this example it will return a new object rather than updating the previous object.

answered Jan 9, 2019 at 4:37

TRomesh

4,4698 gold badges51 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

winnieTheWind Over a year ago

Wow. Thanks for the information. My understanding of state management is not as strong as I would like it to be. But something like this will help me get over the hurdle.

Cuong Vu · Accepted Answer · 2019-01-09 04:27:58Z

1

Maybe you misunderstood something. There is nothing called remove data from db using redux or post data into the database using redux.

What you did in the above example in the addData reducer to post data into the database using redux is just calling a post request to the server and then save that posted data in Redux store.

If you want to delete data from your db, call corresponding delete api then save the result of the request in Redux store.

Redux is just a place to store your application state, that state will decide how the app's UI look.

You can read the Redux Introduction to understand what Redux is.

answered Jan 9, 2019 at 4:27

Cuong Vu

3,72316 silver badges16 bronze badges

1 Comment

winnieTheWind Over a year ago

My apologies. My lack of foreknowledge in managing states has been conceptually difficult. Not something I am instantly used to. I have a database setup in my code so I thought my question made sense, but I see now that it did not. Go easy on people like me with a lack of understanding or foreknowledge. Thanks.

Collectives™ on Stack Overflow

How to remove data from db using redux?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related