In the last two sections we looked at how to pull apart small apps and model them as a collection of 2
views and a collection of data that they use in each application were controlled by re-act while redux 3
is more in control of the data. 4
In this section we're going to try to model a more complicated app by separating into a bucket of data 5
in a bucket of views. 6
As a quick aside there's a really good reason that we're spending so much time talking about this modeling 7
you're going to quickly learn that one of the most important parts of creating in a redux application 8
is figuring out how to design your state having a good sense of how to model the state of your app is 9
really critical. 10
And when you start to change it in and if you need to change it really often starts to get kind of painful 11
. 12
So the last application that we're going to model is a little bit more complicated. 13
It's going to be the popular application tinder. 14
Tinder is a awful awful application but it's also a great example redux. 15
If you're not familiar with Tinder at all no problem. 16
Let's talk about how it works. 17
The general flow is like this. 18
The user is prompted with an image of another user. 19
If the current user likes the image they'll tap the like button. 20
If they don't they'd tap dislike. 21
Once a user likes a person and that person likes the person who posed the image back. 22
In other words you have a match to get a chat log opened and they can talk to each other. 23
Users can see a list of all the open chats they have or the people they have been matched with and they 24
can also view a individual conversation which is a series of text messages back and forth. 25
Now I'm going to make a couple of options on how the underlying data model here works because I don't 26
know exactly how to works on the you know under the covers. 27
But this really worked for our purposes. 28
Now this diagram is going to be more complicated than previous So let's go through it step by step. 29
The first piece of tinder that will model is the swiping screen 30
the screen that shows a single image and allows the user to like or dislike it to show the screen. 31
We really need to have two pieces of data a list of all the users who have not been reviewed and a piece 32
of data that is a reference to the user that we're currently liking or disliking since we'll be rating 33
users over time. 34
And that list of users who are not yet rated Will getting smaller and smaller it makes sense that we're 35
going to need need need to have an overall list of all users in here as well. 36
Both those who have been raided and those who have not yet been rated will assume that these user records 37
also contain the respective image and conversation logs for our user for our current user if any exist 38
. 39
So the next is the conversation screen this screen needs to know all of the open conversations our current 40
user has. 41
So a list of all the current conversations. 42
Finally the actual conversation screen itself where you exchange text messages. 43
This screen will focus on a single user and display all the conversation logs for that current user 44
. 45
So in total we can model Tinder with five pieces of state the currently viewed user a list of open conversations 46
the currently viewed conversations a list of the users who still need to be reviewed and a list of all 47
users. 48
Overall those who have been reviewed and those who have not been reviewed. 49
Now onto the Riak side. 50
There's many different ways we could put this together but this is really a possible implementation 51
right here. 52
I really want to focus on the state here. 53
But just to jump through it really quick and we basically have a image card where you can like people 54
like and dislike buttons a individual text message a list of conversations and the list of text messages 55
. 56
So reiterate all this data that describes our application sits in a single javascript object that is 57
maintained by redux and we refer to it as our application state. 58
All right so with all this discussion about application state and how to model an application with state 59
. 60
Let's jump into the next section and get to coding