{"id":20119,"date":"2021-08-20T09:38:13","date_gmt":"2021-08-20T09:38:13","guid":{"rendered":"https:\/\/www.bacancytechnology.com\/blog\/?p=20119"},"modified":"2024-11-13T07:10:13","modified_gmt":"2024-11-13T07:10:13","slug":"integrate-redux-saga-in-react-native-app-part-2","status":"publish","type":"post","link":"https:\/\/www.bacancytechnology.com\/blog\/integrate-redux-saga-in-react-native-app-part-2","title":{"rendered":"How to Integrate Redux-Saga in React Native App: Beginner\u2019s Tutorial (Part-2)"},"content":{"rendered":"<p>We have learned and implemented the basics of redux-form in our previous tutorial: <a href=\"https:\/\/www.bacancytechnology.com\/blog\/redux-form-in-react-native-application-part-1\" target=\"_blank\" rel=\"noopener\">Integrate Redux Form (Part-1)<\/a>. You can visit the tutorial if you don\u2019t have a basic idea of Redux Form or are struggling to use it in your application. Now, it\u2019s time to step up and introduce <a href=\"https:\/\/redux-saga.js.org\/\" target=\"_blank\" rel=\"noopener\">redux-saga<\/a> with redux form. Are you looking for a simple tutorial to get started with redux middleware in your react native application? If yes, then you have chosen the correct blog!<\/p>\n<p>In this tutorial, we will implement an authentication module in our demo application using redux-saga and redux form.<\/p>\n<h2>Goal<\/h2>\n<p>Before moving towards implementing our authentication module, watch the video below to have a better idea of the demo application.<\/p>\n<p><iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/y0Zf1N1bB0s\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<h2>Tutorial Takeaway<\/h2>\n<p>The demo will contain an Authentication module having<br \/>\nRegister<br \/>\nLogin<br \/>\nDashboard <\/p>\n<p>Use of two redux-form features: <\/p>\n<p>Field Array &#8211; Field Array component is used for rendering an array of fields.<br \/>\nWizard Form &#8211; The common pattern for separating a single form into different input pages is Wizard.<br \/>\nAnd also called Firebase REST API from the Login and Register module.<\/p>\n<p>So, we are clear with the requirements and what the demo will contain. Without wasting more time, let\u2019s get started with building our demo application.<\/p>\n<h2>Redux Store Set up<\/h2>\n<p>The very first step will be setting up the store. <\/p>\n<p>For connecting the store to your application, open app\/index.js<br \/>\napp\/index.js<\/p>\n<p>So, now the store is accessible through our entire application. It\u2019s time to use the store in our app. For that, we will need to do two things-<\/p>\n<p>Individual action.js and saga.js file for the Register and Login Page (which we will see in the coming sections)<\/p>\n<p>A folder named store having three files &#8211; index.js, reducers.js, and sagas.js <\/p>\n<p>store\/index. js<\/p>\n<p>store\/reducers.js<\/p>\n<p>store\/sagas.js<\/p>\n<h2>Register<\/h2>\n<p>We will separate the Register form into separate pages of inputs named-<\/p>\n<p>RegisterPageOne.js<br \/>\nRegisterPageTwo.js<br \/>\nRegisterPageThree.js<\/p>\n<p>This pattern of splitting is known as Wizard Form.<\/p>\n<p>Register\/index.js<\/p>\n<p>To separate the form into small forms we will use a state variable- page for keeping track of the page to be rendered.<\/p>\n<p>Register\/RegisterPageOne.js<br \/>\nRegisterPageOne is our first component which will have two fields : Full Name and User Name.<\/p>\n<p>Register\/RegisterPageTwo.js<br \/>\nRegisterPageTwo is our second component having three fields: Mobile No, Email, and Hobbies. The input for hobbies uses the FieldArray API to render multiple inputs to the user. We will also add validation to the input fields. <\/p>\n<p>Register\/RegisterPageThree.js<br \/>\nThe RegisterPageThree component includes two password fields. Added validation that both passwords should match.<\/p>\n<p>Register\/action.js<\/p>\n<p>Register\/saga.js<\/p>\n<h3>Explanation<\/h3>\n<p>On clicking submit button, onSubmit will be called, and signupUser(payload) will be dispatched containing payload.<\/p>\n<p>From the file Register\/action.js, the Register action type \u201cREGISTER_REQUEST\u201d will be dispatched.<br \/>\nThen saga middleware will watch for the \u201cREGISTER_REQUEST\u201d type action.<br \/>\nIt will take the latest encounter of that action and call the register API.<br \/>\nFor a successful call, it will dispatch the \u201cREGISTER_SUCCESS\u201d action with response data.<br \/>\nFor a Fail call, it will dispatch the \u201cREGISTER_FAILURE\u201d action with an error message. <\/p>\n<h2>Updating Reducer<\/h2>\n<p>Open store\/reducers.js and add this chunk of code stating switch cases.<\/p>\n<p>This reducer serves actions coming from Login and Register. Both the modules dispatch similar types of actions-<\/p>\n<p>Request Action: Upon this action, the reducer updates the loading variable to true.<br \/>\nSuccess Action: Upon this action, the reducer updates the loading variable to false and stores the response from the action to the user variable.<br \/>\nFailure Action: Upon this action, the reducer updates the loading variable to false and stores response coming from action to error variable<\/p>\n<p>Also Read: <a href=\"https:\/\/www.bacancytechnology.com\/blog\/react-native-animation-libraries-and-ui-component\" target=\"_blank\" rel=\"noopener\">Best React Native Animation Libraries &#038; UI Component of 2022<\/a><\/p>\n<p>store\/reducers.js<\/p>\n<h2>Log In<\/h2>\n<p>The Login page accepts two inputs-  email and password.<\/p>\n<p>Login API is called on clicking onSubmit Button. After successful login Dashboard screen will appear. <\/p>\n<p>Login\/index.js<\/p>\n<p>Login\/action.js<\/p>\n<p>Login\/saga.js<\/p>\n<h3>Explanation<\/h3>\n<p>On clicking the submit button, onSubmit will be called, and loginUser(values) will be dispatched containing the user email and password.<br \/>\nFrom the file Login\/action.js, the Login action type \u201cLOGIN_REQUEST\u201d will be dispatched.<br \/>\nThen saga middleware will watch for the \u201cLOGIN_REQUEST\u201d type action.<br \/>\nIt will take the latest encounter of that action and call the login API.<br \/>\nFor a successful call, it will dispatch the \u201cLOGIN_SUCCESS\u201d action with response data.<br \/>\nFor a Fail call, it will dispatch the \u201cLOGIN_FAILURE\u201d action with an error message. <\/p>\n<h2>API Call<\/h2>\n<p>api\/login\/index.js<\/p>\n<h2>Dashboard<\/h2>\n<p>Once you are successfully logged in, you\u2019ll be redirected to the dashboard page. Here\u2019s the code for the UI. <\/p>\n<p>Dashboard\/index.js<\/p>\n<p>useSelector() allows you to extract data from the Redux store state, using a selector function, so that we can use it in our component. As you can see, we can get the value of the user&#8217;s email address from state.Login.user.<\/p>\n<p>You can find the entire source code of the demo application at <a href=\"https:\/\/github.com\/poojan-bacancy\/redux-saga-demo\" target=\"_blank\" rel=\"noopener\">Github Repository<\/a>, from where you can clone and play around with code. <\/p>\n<h2>Conclusion<\/h2>\n<p>So, this was about implementing redux-saga with your redux-form in React Native application. We have covered complete authentication using redux-form features Field Array, Wizard Form, and redux-middleware. You can visit the <a href=\"https:\/\/www.bacancytechnology.com\/tutorials\/react-native\" target=\"_blank\" rel=\"noopener\">React Native Tutorials<\/a> page for more such tutorials and clone the github repository to experiment.<\/p>\n<p>If you are looking for a helping hand for your React Native application, please contact us today to <a href=\"https:\/\/www.bacancytechnology.com\/hire-react-native-developer\" target=\"_blank\" rel=\"noopener\">hire React Native developers<\/a> from us. We have experienced and skilled developers having fundamental and advanced knowledge of React Native.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We have learned and implemented the basics of redux-form in our previous tutorial: Integrate Redux Form (Part-1). You can visit the tutorial if you don\u2019t have a basic idea of Redux Form or are struggling to use it in your application. Now, it\u2019s time to step up and introduce redux-saga with redux form. Are you [&hellip;]<\/p>\n","protected":false},"author":170,"featured_media":20136,"comment_status":"open","ping_status":"open","sticky":false,"template":"blog-new-template.php","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"_lmt_disableupdate":"no","_lmt_disable":"","footnotes":""},"categories":[714],"tags":[],"coauthors":[2430],"class_list":["post-20119","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-native"],"acf":[],"modified_by":"Chandresh Patel","_links":{"self":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/posts\/20119","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/users\/170"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/comments?post=20119"}],"version-history":[{"count":0,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/posts\/20119\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/media\/20136"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/media?parent=20119"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/categories?post=20119"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/tags?post=20119"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/coauthors?post=20119"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}