React Native Tutorial #26 (2021) - Redux - State Management

hi welcome to programming with mesh in this session we want to manage the estate using redux and use it globally in the app and we do this using hooks in the simplest way possible just to get acquainted with the structure of redux [Music] in the preview session we learned how to work with sqlite database and use it to store user information in this session we want to use redux as estate management first i change the login page with the redux logo and name now let's take a brief look at how redux works redux is a predictable estate container for javascript apps as the application grows it becomes difficult to keep it organized and maintain data flow redux solves this problem by managing applications state with a single global object called stor redux fundamental principles help in maintaining consistency throughout your application which makes debugging and testing easier the redux architecture is based on the following components actions actions are plain javascript object that contains information actions are the only source of information for this store and have a type field that tells what kind of action to perform review servers actions only tell what to do but they don't tell how to do so reducers are the few functions that take the current estate and action and return the new estate and tell the store how to do store this door is the object which holds the estate of the application well to get us started we need to install a few modules first we install the redux module then we install the react redux module finally we install the redux tank module as a middleware for redux now to create a redux files we create a new folder called redux and inside it we create the first file called actions we have already created a state within each component for use within the same continent now we create these two estates using redux and use it in all components globally of course keep in mind that estates are stored temporarily and will be deleted when the app closes in the actions file i define two const values to display the type of actions we want to create now i create the first action to save the name inside this patch we consider an object that contains the action type and the value that we pass to the action which is the name here now i repeat the same action again and change it to save age now in the redux folder we create the second file reducers first we import the const values that we defined in the action into this file so that we can identify the type of actions then we define the default values of this state now we create a function that according to the action call performs the operation we want to perform on their states at the input of this function we put state and action in fact whenever any of these actions are called they are placed inside this function now inside the function according to the type of action called which we recognize using constants we change the desired state for example for the name we first hold the current estate object and then fill the estate name with a new value that comes from the action site and we do the same for state age finally by default we return the estate without manipulation now export this function to call it out of this file create the last file in the redux folder named estor inside the redux module we import three functions create a store combine reducers and apply middleware then we import tank as a middleware we also import the reducer function we created here now we create a constant called root reducer to combine all the curated reducers in one place we created one function in the reducer and if you have several functions in the future add them as well now create their store using root reducer and tank as middle there [Music] actually middleware extends their store's abilities and lets you write asynclogic that interacts with desktop types are the recommended middleware for basic redux side fx logic including complex synchronous logic that needs access to the store and simply sync logic like ajax requests now to use this structure first go to the main file app.js and import the provider component into this file from the react redux module we also import that store we created now we put the main body of the app inside the provider component and we set the store init in the login component we import two values of the react redux module use selector and use dispatch we also import the two actions we created now we use the two estates that we defined in the reducers file here using use selector in fact we can use these states instead of previous estates we can also use use dispatch to call actions for example here in the set data function when i store input values in a database i also store them in their state in the dispatch i enter the action along with the name value and do the same for the age in this case the new value is stored inside the estate we can also do this in the unchanged text function now we do the same in the home component and use the states we created with redux instead of the estates within the component [Music] do now i run the app to see the result [Music] as you can see the estate saved on the login page is displayed on the home page as i said estates are deleted when the app closes but here after opening the app we set the estates in the set data function from the values stored in the database so if i update the name and refresh the app the states should be resized and displayed on the home page well there must have been a problem saving their states yes the values read from the database are not a stored in their state here i modified them and refreshed the app as you can see after the refresh their states were properly set and displayed well now suppose we want to do another operation on their states for example have a button that increases the number of age to do this we create a new action in the actions file we do this similar to the preview sections and consider its input as the same age now we use this action in the reducers file in the return section we can use the value we passed to the action or here we can use the previous value of age in the estate and for example i add 1 year to it now i use this action on the home page to increase age to do this i create a new button and i specify that when you press it the increase age action is called you should not define anything as input for it because we didn't use the action value in the reducer function as you can see the button works properly and increases the age by one year so if we want to do a brief review to create a redoxes structure we need the actions file to define the operation on their states we need the reducers file to perform operations on the states according to the called action and we need the store file to have a central storage which we assigned to the provider component in the app.js file by using hooks in react redux we can use or change the values of the estates so there we go we learned how to use redux to manage a state in the app so in the next video we will talk about fetching data using an api now if you enjoy the video please don't forget to like comment share and subscribe and i'll see you in the next session [Music]

Channel: Programming with Mash

Views: 9,565

Keywords: Redux react native, managing state with redux, redux state management, Redux react hooks, programming with mash, redux react native tutorial, react native redux tutorial, redux react tutorial, redux structure react, redux folder structure, redux react native tutorial for beginners, react native redux persist, redux for beginners, redux tutorial for beginners, redux simple example, react native redux login authentication, redux simple explanation, Redux react native login

Id: BtJoy4G3N8U

Length: 13min 43sec (823 seconds)

Published: Fri Jun 04 2021

Reddit Comments

[u/EntireInflation8663]

Zustand >>>>

[u/sharifimehr]

In this session we want to manage the state using Redux and use it globally in the app. And we do this using Hooks in the simplest way possible just to get acquainted with the structure of Redux.