For our fifth and final project at FlatIron, we were tasked with building a full stack, single page application using React and Redux as the frontend and a Rails API as the backend. My project idea was to create an app for people new to the tech community who want to connect with other new “techies” and see what they are up to (i.e. how the job search is going, some interview advice, etc.)
Setting up the backend
Setting up the backend was a breeze — using scaffold when generating models is truly painless. The three models I have are: User, Post, and Friendship. In order the friendship functionality working properly, I had to set up a self-referential relationship in the User class, so that a user can friend another user. A user has many posts, friendships, and many friends through friendships. A post belongs to a user. Friendship is the join table between two users and is set up like so:
Once the backend was set up and the associations were tested out in the console, I was ready to begin the building the front end, or client side, of the application.
Understanding the flow of data in React/Redux
Understanding how data is passed through the application is absolutely crucial to building a fully functioning app. Without this knowledge, it’s almost impossible to debug your code. One of the first steps in setting up the application (after running create-react-app) is to connect to Redux. This is done by the provider, which acts as the “glue” between react and redux. It takes in a prop of “store”, which holds the state-tree of the app. Provider is then wrapped around the entire app in the index.js file, where the store is also created using { createStore } from redux. Having a store is beneficial because now any component can easily access state, without having to worry about “prop drilling”. Prop drilling is passing data as props from one part of a tree to another through components that do not need the data.
The way a component accesses the state from the store is through a function called mapStateToProps. The component needs to be connected to the store, and this function mapStateToProps is the first argument connect takes. Inside of mapStateToProps, you can choose which part of the state you’d like sent to the component as props.
It is important that the mapStateToProps function is defined outside the component. In this example, I am grabbing the signed in user from the state and using it as a prop in the component to display data related to this particular user. The second argument connect takes is mapDispatchToProps. In order to change the state, an action needs to be dispatched on it. An action is an object that has properties ‘type’ and ‘payload’. Type is a constant we define to match it to the correct part of the reducer, and payload is the data being passed. An action creator is the function that returns the action object. In this project, we also used thunk middleware in order to write action creators that return a function that takes in dispatch as an argument in order to make asynchronous requests usinig fetch. Below is an example.
The data is fetched from the backend in this action creator function, and then it is passed over to the reducer and the data is handled depending on the ‘type’. The reducer takes in two arguments: inital state and action. Then there is a switch statement and each case corresponds to a different ‘type’ of action.
The reducer then updates the store state. The use of the spread operator here is important to not mutate the data. Without it, only the new post would appear without the rest of the posts. Action.payload is the data being returned by the action creator function. We access these action creator functions as the second argument of the “connect” function, mapDispatchToProps. A good point to call the function is in the lifecycle method “componentDidMount”.
Overall, this was quite a challenging project to complete. There are so many little things to keep track of in React. That being said, it’s also very rewarding to have made this full stack application. Some features I’d like to add in the future is the ability to comment on posts. I’d also like to sort posts so the most recent ones appear at the top of the feed. If you would like to learn more about this project, here is the github link and a short demo video.
