MERN Full-Stack Tutorial 2020 — Part 3 (connect frontend & backend)
Tags: Mongodb, Expressjs, Nodejs, Redux, React

Depending on your use-case, you can use localStorage to store data that you don’t really need in your database, like mongo. I chose to add the localStorage aspect in this app bc if I deploy this app, I don’t need to deploy this app w/ the mongo connection and have any risk of security issues. However, I added the mongo aspect to make it a true “MERN” app.

Checkpoint #8 — https://github.com/JinKim7/mern-weather-app/tree/8.save-to-localstorage

Files Changes — https://github.com/JinKim7/mern-weather-app/pull/9/files

Save to Mongo instead of Local Storage

client/src/Components/WeatherForm.jsx

Changes that were made in WeatherForm.jsx :

saveToMongo — to have an option to save to our mongodb in addition, or replacement, of the local storage saving.

— to have an option to save to our mongodb in addition, or replacement, of the local storage saving. Call the saveToMongo method in saveFormData in line 24— if you just want to just use mongodb to save/get data, then you can replace all the instances where you’re saving to local storage and the store w/ one instance of using mongo itself.

When you go through the flow of running the app and saving the form again, the weather data should save in your mongo database now instead of local storage.

Checkpoint #9— https://github.com/JinKim7/mern-weather-app/tree/9.save-to-mongo

Files Changes — https://github.com/JinKim7/mern-weather-app/pull/10/files

Redux

This one is going to be a doozy. I will only gloss over general concepts of Redux, but if you want to learn more about it, read about it here.

Redux will be our tool to help us with state management. Basically, any time the state of our web app changes, the entire application will be able to reflect that w/o a page reload.

There are three key components to know with Redux, imo. That would be Actions, Reducers, and the Store.

Creating our redux actions — create a new folder in client/src/actions an index.js file to host all our actions:

client/src/actions/index.js

The action type that were made are SAVE_ZIP , SAVE_WEATHER_DATA , etc… This will describe the actions that we will be taking place with our app and what kind of information will be within our payload.

Reducers

The reducer will do the work to change the application’s state based on which action was called to the redux store.

Create these reducer files in client/src/reducers …

history.js — this will update the weather history list and only keep the top 10 most recent saves.

— this will update the weather history list and only keep the top 10 most recent saves. index.js — accumulates all of the reducers into one file so the components can just import and pick which reducer it wants.

— accumulates all of the reducers into one file so the components can just import and pick which reducer it wants. temperature.js — saves the temperature metric state into the store so it can be used in any component

— saves the temperature metric state into the store so it can be used in any component weather.js — keeps track of the current weather data within the store and pulls from local storage as default.

— keeps track of the current weather data within the store and pulls from local storage as default. zipCode.js — saves the zipcode to the store so that the current zipcode save is accessible to all components.

Client folder structure so far for redux (actions/reducers)

Integrating the Redux Store

Whenever we first created our client app, we installed redux into our package.json , so now we will start using it.

Starting out with the index.js file within client/src , we will refactor it to include the Redux store and also a chrome extension that’ll help debug anything within the Redux store.

client/src/index.js — the inline comments explains it all..

Download/Install Redux DevTools (redux chrome extension link), which is the chrome extension to help debug/visualize the redux store