Build A Blog Site With React, Redux Firebase And MaterializeCSS (Part 8)

<h1>Repository <h3>React <p dir="auto"><span><a href="https://github.com/facebook/react" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://github.com/facebook/react <h3>Material-ui <p dir="auto"><span><a href="https://github.com/mui-org/material-ui" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://github.com/mui-org/material-ui <h3>My Github Address <p dir="auto"><span><a href="https://github.com/pckurdu" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://github.com/pckurdu <h3>This Project Github Address <p dir="auto"><span><a href="https://github.com/pckurdu/Build-A-Blog-Site-With-React-Redux-Firebase-And-MaterializeCSS-Part-8-" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://github.com/pckurdu/Build-A-Blog-Site-With-React-Redux-Firebase-And-MaterializeCSS-Part-8- <h1>What Will I Learn? <ul> <li>You will learn how to perform firebase auth operations using the redux. <li>You will learn the callback functions of signInWithEmailAndPassword (). <li>You will learn to access redux action in react component. <li>You will learn to process the reducer operations and store data to the props in the react component. <li>You will learn to update the state's unknown object with the setState () function <h1>Requirements <ul> <li>text editor (I used visual studio code editor) <li>Basic javascript information <li>Basic react information <h1>Difficulty <ul> <li>Basic <h1>Tutorial Contents <p dir="auto">In this tutorial we will perform sign in and sign out operations using <code>redux. <p dir="auto">We will create a action for the user to login. In action, we will create the necessary control environment and communicate with the <code>reducer.When exporting the reducer to the store, we will provide the login control from the firebase with the action. <p dir="auto">As a result of these transactions we will have information that the user is logged in or not but first we need to activate the component in which the user can enter their information. We created the signIn component in the previous tutorials. In this tutorial we will learn how to access the user-entered inputs. <p dir="auto">After getting the user's login information, we will communicate with reducer and action in the signIn component. We will examine which values are coming to the signIn component and we will complete our code according to the information. <p dir="auto">We will perform the sign out process after performing the login process. For the sign out process, we will define another action and in this action we will perform the firebase exit with the firebase function. We will do the action control with the reducer and forward the sign out information to the store. <p dir="auto">This tutorial is divided into headings as follows: <ul> <li>Create Login Action <li>Activate SignIn Component <li>Access Actions From SignIn Component <li>Access Reducer and Store From SignIn Component <li>Control of Login Processes <p dir="auto">Let’ start and enjoy. <h3>1-Create Login Action <p dir="auto">We created the projectActions.js file to add data to firestore. Since we will perform authentication, we create another file. Under the <code>actions folder, we will create the <code>authActions.js file. <p dir="auto">We will define a function in this file and use this function as action on the reducer side. Since this function will check the user information, it should take the input information with a parameter. <h4>In authActions.js <pre><code>//An action called logIn export const logIn=(information)=>{ return (dispatch,getState,{getFirebase})=>{ //We're accessing the firebase const firebase = getFirebase(); //Email and Password method to check the login. firebase.auth().signInWithEmailAndPassword( information.email, information.password ) } } <p dir="auto"><br /><br /> We defined <code>getFirebase() in <code>index.js.Using <code>getFirebase(), we can access the firebase and use the functions in it. <p dir="auto">The <code>auth () function in the firebase contains functions to perform authentication operations. We'll use the <code>signInWithEmailAndPassword() function because we're activating the Email / Password login method.<br /> <img src="https://images.hive.blog/768x0/https://cdn.steemitimages.com/DQmeB5KpSezxEZbVkk9sYhqJa36GsrDqd2MMVhrmkT8j3NW/react1.png" alt="react1.png" srcset="https://images.hive.blog/768x0/https://cdn.steemitimages.com/DQmeB5KpSezxEZbVkk9sYhqJa36GsrDqd2MMVhrmkT8j3NW/react1.png 1x, https://images.hive.blog/1536x0/https://cdn.steemitimages.com/DQmeB5KpSezxEZbVkk9sYhqJa36GsrDqd2MMVhrmkT8j3NW/react1.png 2x" /><br /> <br /><br /> <code>signInWithEmailAndPassword () returns whether the user is logged on by email or password. If the operation is successful, we can catch it with the <code>then() function. If the login process is wrong or if the error occurred during the connection to the firebase, we will be notified by the <code>catch() function. <h4>In authActions.js <pre><code>//Email and Password method to check the login. firebase.auth().signInWithEmailAndPassword( information.email, information.password //if login is successful ).then(()=>{ dispatch({type:'LOGIN_SUCCESS'}); //if login fails }).catch((err)=>{ dispatch({type:'LOGIN_ERROR',err}); }); <p dir="auto"><br /><br /> As we complete the logIn action, we can switch to the reducer control. <p dir="auto">We have created the <code>authReducer.js file before. In this reducer, we will check the type of action and keep a variable with the help of error. <h4>In authReducer.js <pre><code>//default data is used if no state data is assigned. const initState={ //error variable authError:null } <p dir="auto"><br /><br /> We will do according to the action type of the state and authError variable. <pre><code>//create reducer with state and action parameters const authReducer=(state=initState,action)=>{ switch (action.type){ case 'LOGIN_ERROR': console.log('login error'); //Importing authError in state return{ ...state, authError:'login failed' } case 'LOGIN_SUCCESS': console.log('login success'); return{ ...state, authError:null } default: return state; } } <p dir="auto"><br /><br /> The reducer does not know which action is running and controls all actions. We can use action according to the type of action. <p dir="auto">Now the reducer knows the result of the firebase signIn process. Using the components reducer, we can learn the result of the signIn process and do the operations accordingly. <p dir="auto">Then let's prepare to use this reducer in the signIn component. <h3>2- Activate SignIn Component <p dir="auto">We have previously designed this page.<br /> <img src="https://images.hive.blog/768x0/https://cdn.steemitimages.com/DQmcga18bspMstXDegGHAjjfNrujrHUsCPifyJVZM45DEGk/react2.png" alt="react2.png" srcset="https://images.hive.blog/768x0/https://cdn.steemitimages.com/DQmcga18bspMstXDegGHAjjfNrujrHUsCPifyJVZM45DEGk/react2.png 1x, https://images.hive.blog/1536x0/https://cdn.steemitimages.com/DQmcga18bspMstXDegGHAjjfNrujrHUsCPifyJVZM45DEGk/react2.png 2x" /><br /> <br /><br /> Let's enter the values entered into the input and push the button into the state of this component.<br /> For these operations, we must first define the <code>state.This state must be created to keep the state <code>email and <code>password. <h3>In SignIn.js <pre><code>class SignIn extends Component { //for inputs state = { email: '', password: '' } <p dir="auto"><br /><br /> As input values change, we must update these state values. For this we must trigger the input <code>onChange event and define a function to run when triggered. <pre><code>//will work when the input is changed. handleChange = (e) => { this.setState({ [e.target.id]: e.target.value }) } … {/* for email */} <div className="input-field"> <label htmlFor="email">Email</label> <input type="email" id='email' onChange={this.handleChange} /> </div> {/* for password */} <div className="input-field"> <label htmlFor="password">Password</label> <input type="password" id='password' onChange={this.handleChange} /> </div> <p dir="auto"><br /><br /> We used the <code>setState() function to perform the state update. On this page we have defined two inputs and we used <code>e.target.value to detect which input has changed. Thus the values in the inputs will be equal to the state. <p dir="auto">When the submit event of the form is triggered, it will be retaining the final state of the state inputs. Let's create a function to trigger when the submit event occurs. <pre><code>//will work when the form is submit. handleSubmit = (e) => { e.preventDefault(); console.log(this.state); } … <form className="white" onSubmit={this.handleSubmit}> <p dir="auto"><br /><br /> So we can access the input values.<br /> <img src="https://images.hive.blog/0x0/https://cdn.steemitimages.com/DQmRqc4HLmpJTvafy2grM4SBmEiPNdMSX4K3Za1DHReXJ8J/react1.gif" alt="react1.gif" /><br /> <br /><br /> The input information appears on the console screen.<br /> <img src="https://images.hive.blog/768x0/https://cdn.steemitimages.com/DQmV56ZMd8eeXoVagvMxw9d7iVHFcebtf1fyDws9UKo1HFk/react3.png" alt="react3.png" srcset="https://images.hive.blog/768x0/https://cdn.steemitimages.com/DQmV56ZMd8eeXoVagvMxw9d7iVHFcebtf1fyDws9UKo1HFk/react3.png 1x, https://images.hive.blog/1536x0/https://cdn.steemitimages.com/DQmV56ZMd8eeXoVagvMxw9d7iVHFcebtf1fyDws9UKo1HFk/react3.png 2x" /><br /> <br /><br /> Now signIn component reducer is ready for use. <h3>3- Access Actions From SignIn Component <p dir="auto">Since we are going to connect to the reducer and store within the signIn component, we must use the <code>connect module. <p dir="auto">We must access the <code>logIn action we created at the moment of connection. So we can run this action and control the firebase auth. <h4>In SignIn.js <pre><code>//To access store and reducer import {connect} from 'react-redux'; //To access action import {logIn} from '../../store/actions/authActions'; <p dir="auto"><br /><br /> Let's create a function to access action from component. We should use this function for the second parameter of the connect function. The first parameter of the connect module accesses the store and we access the action with the second parameter. <pre><code>//Function to access action const mapDispatchToProps=(dispatch)=>{ return{ signIn:(info)=>dispatch(logIn(info)) } } export default connect(null,mapDispatchToProps)(SignIn) <p dir="auto"><br /><br /> The generated <code>sigIn represents the logIn function in action. With this function we can access this signIn with component props. <p dir="auto">Then when we submit it, we can run this action with the information in the state. <pre><code>//will work when the form is submit. handleSubmit = (e) => { e.preventDefault(); //action function this.props.signIn(this.state); } <p dir="auto"><br /><br /> So the logIn function in action will work but the component does not know the result of the transaction. <h3>4- Access Reducer and Store From SignIn Component <p dir="auto">We have defined a variable called <code>authError so that we can know the result of the process. We were keeping this variable in store. Then let's access the store in the signIn component and edit the page according to the authError variable. <pre><code>//Function to access store const mapStateToProps=(state)=>{ return { authError:state.auth.authError } } export default connect(mapStateToProps,mapDispatchToProps)(SignIn) <p dir="auto"><br /><br /> With the help of such a function, we have received the authError data from the store on the props of the page. <pre><code>render() { const {authError}=this.props; return ( <p dir="auto"><br /><br /> We can now give a warning if we are making an incorrect entry at the bottom of the page. <pre><code>{/* for submit */} <div className="input-field"> <button className="btn green lighten-1 z-depth-0">Login</button> <div className="red-text center"> {/* If there is data in authError, it means that it has received an error. */} {authError ? <p>{authError}</p>: null} </div> </div> <p dir="auto"><br /><br /> We can control the operations as we finished coding. <h3>5- Control of Login Processes <p dir="auto"><img src="https://images.hive.blog/0x0/https://cdn.steemitimages.com/DQmbYnDPmjwnfJjbnFHQWb5Y1fErF5oU4Wjm2zBiTZJXUw5/react2.gif" alt="react2.gif" /><br /> <br /><br /> If you enter the wrong user name or password on the login screen, the <code>authError value will appear on the screen.<br /> <img src="https://images.hive.blog/768x0/https://cdn.steemitimages.com/DQmXancfNoFjDfHw4WDFn2c4e2VUYQqNh5uFtRcF6YUodBG/react4.png" alt="react4.png" srcset="https://images.hive.blog/768x0/https://cdn.steemitimages.com/DQmXancfNoFjDfHw4WDFn2c4e2VUYQqNh5uFtRcF6YUodBG/react4.png 1x, https://images.hive.blog/1536x0/https://cdn.steemitimages.com/DQmXancfNoFjDfHw4WDFn2c4e2VUYQqNh5uFtRcF6YUodBG/react4.png 2x" /><br /> <br /><br /> We will not include user information in the firebase value in the store that we wrote to the console. <p dir="auto">If you type the user name and password correctly, the user information will be filled in the firebase value.<br /> <img src="https://images.hive.blog/0x0/https://cdn.steemitimages.com/DQmdgofGTshiUKj6xBGbMM52dTGR7Z1uWcuaDa1PqVMU4Gf/react3.gif" alt="react3.gif" /><br /> <br /><br /> and<br /> <img src="https://images.hive.blog/768x0/https://cdn.steemitimages.com/DQmbWZQkN72sPN6oGGXufUEFmGUq7dexqqX2UA1t5AP7PNR/react5.png" alt="react5.png" srcset="https://images.hive.blog/768x0/https://cdn.steemitimages.com/DQmbWZQkN72sPN6oGGXufUEFmGUq7dexqqX2UA1t5AP7PNR/react5.png 1x, https://images.hive.blog/1536x0/https://cdn.steemitimages.com/DQmbWZQkN72sPN6oGGXufUEFmGUq7dexqqX2UA1t5AP7PNR/react5.png 2x" /><br /> <br /> <h1>Curriculum <p dir="auto"><span><a href="https://steemit.com/utopian-io/@pckurdu/build-a-blog-site-with-react-redux-firebase-and-materializecss-part-1" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://steemit.com/utopian-io/@pckurdu/build-a-blog-site-with-react-redux-firebase-and-materializecss-part-1 <p dir="auto"><span><a href="https://steemit.com/utopian-io/@pckurdu/build-a-blog-site-with-react-redux-firebase-and-materializecss-part-2" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://steemit.com/utopian-io/@pckurdu/build-a-blog-site-with-react-redux-firebase-and-materializecss-part-2 <p dir="auto"><span><a href="https://steemit.com/utopian-io/@pckurdu/build-a-blog-site-with-react-redux-firebase-and-materializecss-part-3" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://steemit.com/utopian-io/@pckurdu/build-a-blog-site-with-react-redux-firebase-and-materializecss-part-3 <p dir="auto"><span><a href="https://steemit.com/utopian-io/@pckurdu/build-a-blog-site-with-react-redux-firebase-and-materializecss-part-4" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://steemit.com/utopian-io/@pckurdu/build-a-blog-site-with-react-redux-firebase-and-materializecss-part-4 <p dir="auto"><span><a href="https://steemit.com/utopian-io/@pckurdu/build-a-blog-site-with-react-redux-firebase-and-materializecss-part-5" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://steemit.com/utopian-io/@pckurdu/build-a-blog-site-with-react-redux-firebase-and-materializecss-part-5 <p dir="auto"><span><a href="https://steemit.com/utopian-io/@pckurdu/build-a-blog-site-with-react-redux-firebase-and-materializecss-part-6" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://steemit.com/utopian-io/@pckurdu/build-a-blog-site-with-react-redux-firebase-and-materializecss-part-6 <p dir="auto"><span><a href="https://steemit.com/utopian-io/@pckurdu/build-a-blog-site-with-react-redux-firebase-and-materializecss-part-7" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://steemit.com/utopian-io/@pckurdu/build-a-blog-site-with-react-redux-firebase-and-materializecss-part-7 <h1>Proof of Work Done <p dir="auto"><span><a href="https://github.com/pckurdu/Build-A-Blog-Site-With-React-Redux-Firebase-And-MaterializeCSS-Part-8-" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://github.com/pckurdu/Build-A-Blog-Site-With-React-Redux-Firebase-And-MaterializeCSS-Part-8-