CODEWITHSUNDEEP
node.jsmongodbreactjsmongooseredux
Leth
Leth

Reputation: 1059

Deleting a record using Mongoose with Redux

I want to delete a record in my mongoDB, when a user presses a button for the given record. For reference:

enter image description here

I have all my mongoose and redux code set up, but i get this error: enter image description here

This is my action:

//deletes a survey when user clicks button
export const deleteSurvey = (surveyId) => async dispatch => {
  const response = await axios.delete("/api/surveys", surveyId);
  dispatch({ type: FETCH_SURVEYS, payload: response.data });
};

And this is my route handler:

app.delete("/api/surveys", requireLogin, (req, res) => {
    Survey.findByIdAndRemove(req.surveyId, (err, survey) => {
      let response = {
        message: "Survey successfully deleted",
      };
      res.status(200).send(response);
    });
  });

The list of records is being rendered inside a component based react component. I am importing my action like this:

import { deleteSurvey } from "../../actions";

And the call to the action is being triggered on the onClick event of the button:

<button
    onClick={() => this.props.deleteSurvey(survey._id)}
    className="btn-floating btn-large red"
   >
   <i className="material-icons">clear</i>
</button>

How can i resolve this error?

Edit: Component connect

function mapStateToProps({ surveys }) {
  return { surveys }; //returns the surveys reducer from the combined reducers
}

export default connect(mapStateToProps, { fetchSurveys })(SurveyList);

Edit: New error message

enter image description here

Which refers to:

return this.props.surveys.map(survey => {...}

Edit: Fetching surveys from API

const surveys = await Survey.find({ _user: req.user.id }) //get all surveys for the current user
      .select({ recipients: false }); //dont include recipients
    res.send(surveys);

Upvotes: 2

Views: 834

Answers (2)

Imtiaz
Imtiaz

Reputation: 101

You need to use React-Redux's connect higher order function to map the action to your component.

Note: this is not how you should write your code and is just for demonstration

import React from 'react';
import { connect } from 'react-redux';
import { deleteSurvey } from "../../actions";

const SurveyList = ({ survey, handleDeleteSurvey }) => {
  return <div>
            <button
              onClick={() => handleDeleteSurvey(survey._id)}
              className="btn-floating btn-large red" >
              <i className="material-icons">clear</i>
            </button>
         </div>
}

const mapStateToProps = ({ surveys }) => {
  return { 
    surveys 
  } 
}

const mapDispatchToProps = dispatch => {
  return {
    //note that this code assumes deleteSurvery is a thunk
    handleDeleteSurvey: id => dispatch(deleteSurvey(id))
  }
}


export default connect(mapStateToProps, mapDispatchToProps)(SurveyList);

Upvotes: 1

linasmnew
linasmnew

Reputation: 3977

You haven't connected your action to your component:

export default connect(mapStateToProps, { fetchSurveys, deleteSurvey })(SurveyList);

Edit: Your second error is coming from the fact that map only works over arrays so you need to confirm that surveys is an array which you can do using: console.log(this.props.surveys)

Upvotes: 1

Related Questions