How do I combine my React/Redux app with a Database?

1

Hello,

My first approach would be to add a collection (myColl) in my MongoDB database. Then, whenever the already authenticated user signs out, I would dispatch an action saveUserData which consists in saving all the data the user generated during his session to the database’s collection (using the save function from mongoose for instance)

Whenever the user tries to login, I would first make requests to the database, to check that this user has signed up in the past, and that his unique id exists in the collection. For that, I would define a new action fetchUserData, where I would perform a find function with my mongoose middleware for instance, fetch all the data specific to this user, and do a local storage of this data for later use.

So, I would do quite a lot of exchanges with the DB. This is how I programmed the API back-end projects. I’m not sure this approach is the right way to do here though with the FS projects.

Can you please help and point me to the right direction ? Do you have any link to share to explain how this all works ? I understood axios or fetch are going to be handy here, but I didn’t understand how to use them and why not just stick to mongoose with some find and save requests ?

2

This is a fairly common task. You’ll need to contact your backend via an endpoint like ‘/getData’. This can be done with a form or RESTfully with axios or fetch as you suggested. Following the Redux design pattern this would be done in an action generator and the code might look something like this:

axios.get("/getData", {
    username: "Some guy"
    //etc
}).then(function(data) {
    //do something with the data
});

And your server side language would support this ‘/getData’ route, and would query Mongo (with Mongoose or whatever) and then send a response depending on what it found. New actions like “FETCHED_USER_DATA” or “USER_DOES_NOT_EXIST” would be generated depending on the reply from the server.

2 Likes