In this video, Emmanuel Henri works on the initial Redux setup to make the detail view work, coding the actions and reducers.
- [Instructor] Okay, so now we need to start working on redux. So we need to start putting some actions in here, and when we select something, show a specific detailed view. So we'll create the actions and the reducers that we'll be able to use when we click on a specific item and show the detailed view. So let's go ahead and do that. So the first thing you're going to need to do is go into the index, and now we're going to create the actions. So let's go in export, a variable, select person. And this will need to have a people ID. And this is a function that will return a type, and then also some data that we need to use in the reducers. So basically, we're going to pass the people ID, and the type, I don't know if you remember, in redux, we need to pass a type of action. So when we use a reducer, we expect a type which will basically change the state based on the type. So right now, we have a type that we're going to call selected person. And the best practices for the type is to put all the letters in capital letters. And we need this to be curly braces, and not commas. Perfect. That's why I had an error. So we're returning an object that has a type and then some data that we need to pass in the reducers, so this is a first action. So let's go ahead and create a second one. So I want to also have an action whenever we are not selecting somebody. So, whenever we're not selecting somebody, I don't want any actions, which is the next one. So this is a function that's called none person. And we are not expecting anything in this particular function, which will return an object with a type, and the type for this one is going to be none selected. And as we click in our application, you're going to be able to see all these actions inside of our reactive buggers. So we're going to check that out when we are done coding all this. So now we actually need to put more data inside of our reducers. So a few things we need to actually add in here. So we need to add a detail view property that we'll put as false. So when we are showing the detail view, if we are clicking on any of these items, we want to be able to change the state to detail view true, and then show the actual detail view. And this is this property here. And then we also need a property for a person selected, and for now we'll put this one as null. Now we need to change our reducer. So our reducer still takes a state, initial state, and an action. And then in our switch statement, we're going to add two more. So we're going to add one that is a case where the type is selected person. So again, we are referring back to our action, so this is the type that we're passing inside of our reducer, so when the case is the select a person, we're going to return a few things. So we're going to return the current state and then add to it changes. So we're going to change the detail view to true. And then the person selected to the action with a payload. So basically what we're doing here is when we are clicking here, it's going to call on to this selected person, and then the selected person will pass that on the the reducer here. So the case is selected person. And again, the state in redux is not unible, so we're not changing the state. We're just creating a copy of the state, and we're adding these new items to the new copy of the state. So you'll see that when we take a look at the state inside of redux, we see the history of the state, And we can actually move in the history of the state. So this second case that we need to define, and let's copy this one and just paste it here, is nonselected. So again, we're going back to our actions here, so nonselected. Like so. Again, we're making a copy of the current state and the detail view's going to be now to false, and person selected will be null again. So now we've defined two actions that we can do inside of our application. So when we click on any of these guys, we're going to make changes to the state with some data, and then we'll be able to leverage that state to actually render a view. So we'll continue working on this throughout the rest of this chapter by adding the detail view and then passing some data through the detail view.
- Initializing React Native projects
- Installing material kit and vector icons
- Setting up Redux
- Creating a list view, a detail view, and a menu
- Adding new components
- Using the React Native debugger
- Coding the scroll on detail view