This course focuses on developing truly cross-platform, native iOS and Android apps using React Native (Ver 0.55) and the Expo SDK (Ver. 27.0.0). React Native uses modern JavaScript to get truly native UI and performance while sharing skills and code with the web. You will learn about UI development with React Native UI and layout support and access the native mobile platform's capabilities from Javascript using the Expo SDK. You should have already completed the Bootstrap 4 and the React courses in this specialization before proceeding with this course. At the end of this course you will be able to (a) Build mobile applications targeting multiple platforms with a single codebase, (b) Leverage your React and Javascript skills, (c) Use various features of React Native and the Expo SDK to build truly cross-platform mobile applications, and (d) Use Redux to design the architecture for a React-Redux application
Exercise (Video): Redux Adding Favorites
Loading...
來自 The Hong Kong University of Science and Technology 的課程
Multiplatform Mobile App Development with React Native
11 個評分
The Hong Kong University of Science and Technology
11 個評分
課程 3（共 4 門，Specialization Full-Stack Web Development with React）
從本節課中
React Native UI Elements and Redux
This module introduces you to various React Native UI elements. We will look at how we can make use of these elements in designing the various views of our application. You will get an overview of the Flux architecture and introduced to Redux as a way of realizing the Flux architecture
與講師見面
Jogesh K. MuppalaAssociate Professor
Department of Computer Science and Engineering
[MUSIC]
Now, that we have our Redux store setup,
why not persist their favorites information in that Redux store?
Now, this involves us setting up a couple of new actions.
Then we need to create a new action creator, and
then set up our dish detail component to be able to send to the information
whenever you select dish as your favorite it needs to be dispatched to Redux store.
So that the Redux store can be updated
with the newly selected favorite information.
So this may be will also learn how to set up the actions and redux store, so
if your knowledge of Redux is a little bit shaky.
This is a good time for you to review your knowledge of Redux also.
To get started on this exercise, let's now go to our project and
open the action type start js file, and add in two new actions here.
So we'll add in an action called POST_FAVORITE which
is the action to POST_FAVORITE.
Now, I separate the POST_FAVORITE
from the other action called Add_Favorite.
The reason is that the Post_Favorite should be an action which would actually
push the favorite to the server and would update the favorites on the server side,
and then when the server gets updated the server needs to reply back to you saying
the favorite is properly updated.
And then that happens you will update your local store.
Now, in this course we don't have the support on the server side for
maintaining our favorites, so I am not going to do that part,
but I will set up the structure in place now then we do the No disk course.
Then we will set up our server to be able to track favorites from each user.
because there, we will look at authenticating users and so on.
So at that point, we will be able to post the favorites for a user directly to
the server, and when the server gets updated, then you will update your local
Redux store to reflect the change in the favorites on the server side.
And, in this case, in this exercise I'm only going to
update the Redux store directly, but I will go through the two step process.
First, I will Post_Favorites, and that will trigger the Redux tank.
And then which in turn will post a favorites into
my Redux tool using the ADD_FAVORITE action.
Once we have set up these two action types, let's go into the Redux folder and
add a new reducer here called favorites.js.
Now, in that favorites.js file,
let me import * as ActionTypes
from action types.
And set up the reducer here so the reducer here, so
the reducer is export const favorites the reducer is called favorites and
this one takes the state which would be initially an empty array here.
And then the action, add the second parameter and
when this receives the action,
we’ll switch based on the action types and
this is the standard way that you will handle actions here.
So the one action type that we’re going to handle is
the ADD_FAVORITE action type here.
So when you receive the ADD_FAVORITE action
then you will say if (state.some).
So what we are checking here is that if this favorite dishes already in the list
of favorites for you, then you don't need to do anything.
You don't need to change the state.
So then, you'll return the state as such.
Otherwise, we will Return
state.concat(action.payload).
So that payload will contain the dishID from the dish that I want to add to
the favorites.
So if the dishes already in the favorites, then I don't need to change the state
at all, because the favorites remain the same.
If not, then this is a new disc that I need to add to the favorites, so
I concatenate that into my favorites array, and then send it back.
And of course, I need the default.
Which will return the state here.
Now, once we have done this, then we need go to the configures tool,
and then we need to update the reducers here to add in the new reducer.
So let me import.
Favorites, from,
dot slash favorites.
And then after leaders, I will add in favorites here.
So now, my state shape now contains five.
Dishes, comments, promotions, leaders, and favorites.
Now, let's add in the action creators.
So going into the actioncreators.jsfile, all the way at the bottom I will add in
postFavorite, which receives the dishID as that
parameter and will dispatch, so
this is a tank that I'm implementing here.
And then what I will do here is,
I will simulate the delay by saying setTimeout and,
After a two second delay,
I will dispatch the add favorite action,
so this is sort of simulating access to the server here,
later on when we set up the server to be able to store the favorites,
then we'll be able to replace this with
the fetch and post the item to the server.
Now, we'll implement the addFavorite
which receives the dishId as the parameter.
And then returns
to ADD_FAVORITE type and
payload contains
the dishId.
So now, I have set up two action creators, postfavorite and addfavorite.
Now once we have done this, then we can go in and
make use of this in the dishdetailComponent.
So going to dish detail component, I'm now going to import.
The postFavorite from,
../redux/ActionCreators.
Now, the postFavorite is the one that I'm going to use here.
Now, I'm going to create mapDispatchToProps and
this receives the dispatch as the parameter and
I'll set up the postFavorite as
dishId and add all function.
DishId, dispatch,
postFavourite, dishId.
And once I have set up the map dispatched to favorites here,
then I need to go down into the code here, and
then where I save mark favorite instead of setting the state,
so my state will no longer be stored locally.
Because the favorites will be now on the Redux store, so
this would be the mark favorite.
Needs to be updated to say
this.props.postFavorite with the dish ID and
then I have set up the favorites here.
So here we'll say, favorite is this
.props.favorites.sum yield this ID,
because the props are in there.
So which also means that I need to go up here, and
then in addition to the dishes and the comments,
I need favorites also, from the state.
State.favorite, so mapStatetoProps needs to be updated, and finally,
we come down to the connect here, and then in addition to the mapStateToProps,
we'll have to add in the mapDispatchToProps here.
And then save all the changes.
And my dish detail component is showing red here.
So which means that there is error somewhere.
Okay, that is where the error is.
You know by default, I normally put a semicolon at the end.
But this, you don't need a semicolon there, so
that's why it was showing an error, so let's save the changes, and then go and
take a look at our application in that device.
Going back to my application, once my application is loaded,
let's now go to the menu page,
and then I will go to the first dish.
Let me add this to my favorites and
you see that there is a short delay before that got marked.
That was because we have a two-second delay that we introduced there.
And then I can go back out to the Menu page.
Now, when I return to the Dish Details page, you can see that they're still
marked as favorite, because my favorites are now being tracked in my Redux store.
I can go and mark another dish as my favorite
and after a two second delay you see that light up and
I'll be able to go back, and then see another dish which is not in my favorites,
but then I navigate back to that dish and I see that it is still in my favorites.
And then let's go back to the last dish, and
you see that it is still in my favorites.
So my favorites information is being now persisted in the Redux
store with the addition of the support for
tracking favorites in my Redux store.
With this, we complete this exercise.
In this exercise, we have seen how we can track our favorites in the Redux store.
We have seen how we can set up action types, action creators,
then we set up a new reducer And
then added in the new reducer to our Redux store.
And then we are able to persist this information by dispatching the appropriate
actions when the user selects a dish as his or her favorite.
This is a good time for
you do a git commit with the message Redux Add favorites.
[MUSIC]
