React/Redux
It’s been a while… I graduated from Flatiron! My program finished mid-December, and I went traveling for a few weeks in the UK. When I got back, I wanted to review my most recent project, U & I, that I built with Drew Nickerson and Scott Lindquist. It’s a social network where only you and one other person share media with each other — think Facebook Messenger meets Tumblr. You can (so far) post text and upload photos to this board. You can have multiple boards, but each with only one other person.
We used a Rails back-end, React front-end, and PostgreSQL for the database. Say a user wanted to create a new board between themselves and another person — this is how it would look:
- On your profile, your state starts out like this:
2. You’d type in your new board name, plus the email of the user you’d want to share the board with.
3. Every time you type into the name / user input boxes, you are making a change to the state. This happens in the handleTitleChange(event) and handleOtherUserChange(event) functions, using setState.
4. When you click Create, this is now triggering the handleCreate(event) function, where we dispatch the createBoard action with the current state (which is now changed to whatever title and user email you’ve entered). We’re also passing in the current user’s ID, to keep track of which user is doing this.
The way we are able to do this is by calling this.props.createBoard(title&email). We can do this because we have mapped dispatch to props. This means the dispatch function has become a prop of the Object, and we can call on it using this.props. Ahh, Redux.
5. Now let’s take a look at the createBoard action. Keep in mind we’ve passed in the new board title, other user’s email, and current user’s ID.
This is what createBoard.js looks like:
Again, we are passing in boardTitle, otherUserEmail, and userID to createBoard.
We are then returning a function that will do quite a few things for us. First off, we’re passing in dispatch, and calling it within the function. Within the function, we start off by making an AJAX call to the Rails API. We’re making a POST request to http://localhost:3000/boards and passing in the data above.
6. We’ve now hit the Rails API. In Rails, and we’re in the Boards Controller.
The information from React goes into Rails as params. We set variables for the board & the other user’s email, and we find the current user via the user ID sent through and we find the other user by the email sent through.
If everything is valid, the board saves. At this point, we create two UserBoards. UserBoards are what connect the users to their unique boards. (Users have many UserBoards, Users have many Boards through UserBoards — vise versa with Boards. UserBoards belong to Users, and belong to Boards).
After that, we map through all of the current user’s boards, and store that in new_user_boards. This information is rendered into JSON and sent back to React.
7. Back to createBoard.js. Using .done, we are able to make our program wait until the API request is finished until moving on. We pass the the response data into another function that calls the dispatch function (remember when we passed that in earlier), with an “UPDATE_USER_BOARDS” type and a payload containing boards: response.boards.
8. Now onto the reducers. “UPDATE_USER_BOARDS” is only found in the boardsReducer.
We’re returning a new state object with action.boards (which is calling boards: response.boards). If you think back to Rails, this is the list of the user’s boards.
9. Your profile re-renders with your updated list of boards!
Short video of creating a board:
