Flatiron React-Redux Final Project
My name is Gabriela , and I’m an online full time student at Flatiron school. We’re not coming towards the end of my journey becoming a Software Developer, and I’ve completed my final project .
Recently I got engaged, and one of the things my partner and I love to do is travel. Before Covid-19, that was one of our favorite things to do, and we were just getting started! Which then led me to create a simple travel app that I call Engaged Travels. This application allows a user to sign up, log in and out , and keep track of trips , and if needed, edit/delete them.
For this project, I used a React/Redux front end, and Ruby on Rails as an API backend .
Redux Flow
- User Interface
When a user wants something to change, let’s say a button is pushed to add an item to the cart, this is when a change is triggered.
2. Action
The action is what we want to take place. The “Add one” action . The code will look similar to “ ‘ADD_ONE’ “. Therefor you would create an actions folder that holds a file of each action you need. Actions require a “type” property, and they are plain JavaScript Objects, in Redux that is!
3. Reducers
In React-Redux we use what is called a state, which we will cover later. This is how Reducers relate to state. What you will have is a folder called Reducers, that hold …….you guessed it, reducers! This will hold the code that is responsible for how the applications state in response to its action. For example, the new state should be 1 integer above the previous state being that the action was triggered.
4. Store
The store, written as store.js, is where everything in the app comes together . This file holds very important methods like
- dispatch(action)
- getState()
- subscribe(listener)
5. State
State is a very important concept in React, and it’s contained in the store. State is an object that has the ability to change depending on what is being triggered on the client side of the app.
There you have a basic structural overview of the flow in Redux.
