#2 setup redux store

package.json

@@ -11,10 +11,14 @@
   "dependencies": {
     "@material-ui/core": "latest",
     "@material-ui/icons": "^4.9.1",
+    "axios": "^0.19.2",
     "react": "latest",
     "react-dom": "^16.13.1",
+    "react-redux": "^7.2.0",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "latest"
+    "react-scripts": "latest",
+    "redux": "^4.0.5",
+    "redux-thunk": "^2.3.0"
   },
   "browserslist": {
     "production": [

src/App.js

@@ -1,7 +1,9 @@
+//Library
 import React,{Component} from 'react';
-import Main from './components/MainComponent';
 import {BrowserRouter} from 'react-router-dom';
 
+//Our Code
+import Main from './components/MainComponent';
 class App extends Component {
 
   render(){
@@ -11,7 +13,7 @@ class App extends Component {
         </BrowserRouter>
     );
   }
- 
+
 }
 
 export default App;

src/actions/authActions.js

@@ -0,0 +1,22 @@
+export const USER_LOADED = 'USER_LOADED';
+export const LOGIN_SUCCESS = 'LOGIN_SUCCESS'
+
+export function authenticateUser (user) {
+  return{
+    type: USER_LOADED,
+    user
+  }
+}
+
+export function handleAuthenticateUser (user) {
+  return (dispatch) => {
+
+  }
+}
+
+export function loginUser (user) {
+  return {
+    type: LOGIN_SUCCESS,
+    user,
+  }
+}

src/actions/errorActions.js

@@ -0,0 +1,9 @@
+export const GET_ERRORS = 'GET_ERRORS'
+export const CLEAR_ERRORS = 'CLEAR_ERRORS'
+
+export function getErrors (errors) {
+  return {
+    type: GET_ERRORS,
+    errors,
+  }
+}

src/components/MainComponent.js

@@ -7,7 +7,6 @@ import SignIn from './SignIn';
 
 class Main extends Component {
 
-
   render() {
 
     return (

src/components/SignIn.js

@@ -1,19 +1,19 @@
-import React from 'react';
-import Avatar from '@material-ui/core/Avatar';
-import Button from '@material-ui/core/Button';
-import CssBaseline from '@material-ui/core/CssBaseline';
-import TextField from '@material-ui/core/TextField';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import Checkbox from '@material-ui/core/Checkbox';
-import Link from '@material-ui/core/Link';
-import Grid from '@material-ui/core/Grid';
-import Box from '@material-ui/core/Box';
-import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
-import Typography from '@material-ui/core/Typography';
-import { makeStyles } from '@material-ui/core/styles';
-import Container from '@material-ui/core/Container';
+import React from 'react'
+import Avatar from '@material-ui/core/Avatar'
+import Button from '@material-ui/core/Button'
+import CssBaseline from '@material-ui/core/CssBaseline'
+import TextField from '@material-ui/core/TextField'
+import FormControlLabel from '@material-ui/core/FormControlLabel'
+import Checkbox from '@material-ui/core/Checkbox'
+import Link from '@material-ui/core/Link'
+import Grid from '@material-ui/core/Grid'
+import Box from '@material-ui/core/Box'
+import LockOutlinedIcon from '@material-ui/icons/LockOutlined'
+import Typography from '@material-ui/core/Typography'
+import { makeStyles } from '@material-ui/core/styles'
+import Container from '@material-ui/core/Container'
 
-function Copyright() {
+function Copyright () {
   return (
     <Typography variant="body2" color="textSecondary" align="center">
       {'Copyright © '}
@@ -23,7 +23,7 @@ function Copyright() {
       {new Date().getFullYear()}
       {'.'}
     </Typography>
-  );
+  )
 }
 
 const useStyles = makeStyles((theme) => ({
@@ -44,17 +44,17 @@ const useStyles = makeStyles((theme) => ({
   submit: {
     margin: theme.spacing(3, 0, 2),
   },
-}));
+}))
 
-export default function SignIn() {
-  const classes = useStyles();
+const SignIn = () => {
+  const classes = useStyles()
 
   return (
     <Container component="main" maxWidth="xs">
-      <CssBaseline />
+      <CssBaseline/>
       <div className={classes.paper}>
         <Avatar className={classes.avatar}>
-          <LockOutlinedIcon />
+          <LockOutlinedIcon/>
         </Avatar>
         <Typography component="h1" variant="h5">
           Sign in
@@ -83,7 +83,7 @@ export default function SignIn() {
             autoComplete="current-password"
           />
           <FormControlLabel
-            control={<Checkbox value="remember" color="primary" />}
+            control={<Checkbox value="remember" color="primary"/>}
             label="Remember me"
           />
           <Button
@@ -103,15 +103,17 @@ export default function SignIn() {
             </Grid>
             <Grid item>
               <Link href="#" variant="body2">
-                {"Don't have an account? Sign Up"}
+                {'Don\'t have an account? Sign Up'}
               </Link>
             </Grid>
           </Grid>
         </form>
       </div>
       <Box mt={8}>
-        <Copyright />
+        <Copyright/>
       </Box>
     </Container>
-  );
+  )
 }
+
+export default SignIn

src/index.js

@@ -1,15 +1,22 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import CssBaseline from '@material-ui/core/CssBaseline';
-import { ThemeProvider } from '@material-ui/core/styles';
-import App from './App';
-import theme from './theme';
+//Library Import
+import React from 'react'
+import ReactDOM from 'react-dom'
+import CssBaseline from '@material-ui/core/CssBaseline'
+import { ThemeProvider } from '@material-ui/core/styles'
+import theme from './theme'
+import store from './store'
+import { Provider } from 'react-redux'
+
+//Our Code Import
+import App from './App'
 
 ReactDOM.render(
   <ThemeProvider theme={theme}>
     {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
-    <CssBaseline />
-    <App />
+    <CssBaseline/>
+    <Provider store={store}>
+      <App/>
+    </Provider>
   </ThemeProvider>,
   document.querySelector('#root'),
-);
+)

src/middlewares/index.js

@@ -0,0 +1,8 @@
+import logger from './logger';
+import thunk from 'redux-thunk';
+import {applyMiddleware} from 'redux';
+
+export default applyMiddleware(
+  thunk,
+  logger,
+);

src/middlewares/logger.js

@@ -0,0 +1,11 @@
+const logger = (store) => (next) => (action) => {
+  console.group(action.type);
+  console.log(action);
+  const returnValue = next(action);
+  console.log(`The new state: ${JSON.stringify(store.getState(), '', ' ')}`);
+  console.groupEnd();
+
+  return returnValue;
+};
+
+export default logger;

src/reducers/authReducers.js

@@ -0,0 +1,27 @@
+import { USER_LOADED } from '../actions/authActions'
+import { LOGIN_SUCCESS} from '../actions/userActions'
+
+const intialState = {
+  token: localStorage.getItem('token'),
+  isAuthenticated: null,
+  user: null
+}
+export default function(state = intialState, action) {
+  switch (action.type) {
+    case USER_LOADED:
+      return {
+        ...state,
+        isAuthenticated: true,
+        user: action.payload
+      }
+    case LOGIN_SUCCESS:
+      return {
+        ...state,
+        isAuthenticated: true,
+        ...action.payload
+      }
+    default:
+      return state;
+
+  }
+}

src/reducers/errorReducers.js

@@ -0,0 +1,13 @@
+import { GET_ERRORS, CLEAR_ERRORS } from '../actions/errorActions'
+
+export default function(state = {}, action) {
+  switch (action.type) {
+    case GET_ERRORS:
+      return{
+        msg: action.payload.msg,
+        status: action.payload.status
+      }
+    default:
+      return state
+  }
+}

src/reducers/index.js

@@ -0,0 +1,6 @@
+import { combineReducers } from 'redux'
+import authReducers from './authReducers'
+
+export default combineReducers({
+  auth: authReducers
+})

src/store.js

@@ -0,0 +1,9 @@
+import { createStore, compose } from 'redux'
+import reducers from './reducers'
+import middlewares from './middlewares'
+
+const store = createStore(reducers,
+  compose(middlewares, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()),
+)
+
+export default store