configured app to store and get user data from redux store

Author: AdityaKumawat97

src/App.js

@@ -1,37 +1,32 @@
 import React, { Component } from 'react';
+import { connect } from 'react-redux'
 import './App.css';
 import { Route, Switch } from 'react-router-dom';
 import Homepage from './Pages/homepage/Homepage.component'
 import ShopPage from './Pages/shop/Shop.component'
 import signInAndSignUpPage from './Pages/sign-in-and-sign-up/sign-in-and-sign-up.component'
 import Header from './components/header/header.component'
 import { auth, createUserProfileDocument } from './firebase/firebase.utils'
-
+import { setCurrentUser } from './redux/user/user.actions'
 class App extends Component {
-  constructor(props) {
-    super(props)
-
-    this.state = {
-      currentUser: null
-    }
-  }
   unsubscribeFromAuth = null
   componentDidMount() {
+    const { setCurrentUser } = this.props
     this.unsubscribeFromAuth = auth.onAuthStateChanged(async userAuth => {
       if (userAuth) {
         const userRef = await createUserProfileDocument(userAuth)
 
         userRef.onSnapshot(snapshot => {
-          this.setState({
+          setCurrentUser({
             currentUser: {
               id: snapshot.id,
               ...snapshot.data()
             }
           })
         })
       }
-      else{
-        this.setState({ currentUser: null })
+      else {
+        setCurrentUser(userAuth)
       }
     })
   }
@@ -40,7 +35,7 @@ class App extends Component {
   }
   render() {
     return <div className='App'>
-      <Header currentUser={this.state.currentUser} />
+      <Header />
       <Switch>
         <Route exact path='/' component={Homepage} />
         <Route exact path='/shop' component={ShopPage} />
@@ -50,4 +45,7 @@ class App extends Component {
   }
 }
 
-export default App;
+const mapDispatchToProps = dispatch => ({
+  setCurrentUser: user => dispatch(setCurrentUser(user))
+})
+export default connect(null, mapDispatchToProps)(App);

src/components/header/header.component.jsx

@@ -1,9 +1,11 @@
 import React from 'react'
+import { connect } from 'react-redux'
 import './header.styles.scss'
 import { ReactComponent as Logo } from '../../assets/newLogo.svg'
 import { Link } from 'react-router-dom'
 import { auth } from '../../firebase/firebase.utils'
-export default function Header({ currentUser }) {
+
+function Header({ currentUser }) {
     return (
         <div className="header">
             <Link to="/" className="logo-container">
@@ -18,7 +20,7 @@ export default function Header({ currentUser }) {
                 </Link>
                 {
                     currentUser ?
-                        <div className="option" onClick={()=> auth.signOut()}>  
+                        <div className="option" onClick={() => auth.signOut()}>
                             SIGN OUT
                         </div>
                         :
@@ -31,3 +33,9 @@ export default function Header({ currentUser }) {
         </div>
     )
 }
+
+const mapStatetoProps = state => ({
+    currentUser: state.user.currentUser
+})
+
+export default connect(mapStatetoProps)(Header)