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