February 2023

Interceptor

February 20, 2023

2:53 pm

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import axios from 'axios';
// Add a request interceptor
axios.interceptors.request.use(
  config => {
    console.log("inside interceptor request", config)

    const token = "TOKEN FROM INTERCEPTORS"
    if (token) {
      console.log("INSIDE request use")
      config.headers['Authorization'] = 'Bearer ' + token
    }
    
    return config
  },
  error => {
    Promise.reject(error)
  }
)


axios.interceptors.response.use(
  config => {
    console.log("inside interceptor response", config)
    return config
  },
  error => {
    Promise.reject(error)
  }
)



const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

reportWebVitals();

App.js

import logo from './logo.svg';
import './App.css';
import { useEffect } from 'react';
import axios from 'axios';

function App() {

  useEffect(()=> {

    axios({
      method: 'get',
      url: 'http://localhost:1234/webservice.php'
    })
      .then(function (response) {
        console.log(response)
      });
    
  }, [])

  return (
    <>
    This is App component
    </>
  );
}

export default App;

webservice.php

<?php

header("Access-Control-Allow-Origin: *");

// echo "<pre>";
// print_r($_SERVER);

echo json_encode(["test" => "Hello world...."]);

Redux

by admin

February 20, 2023

12:48 pm

9 Comments on Redux

Javascript

npm install react-redux @reduxjs/toolkit

counterSlice.js

import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  count: 0,
};

const counterSlice = createSlice({
  name: "counter",
  initialState,
  reducers: {
    increment: (state) => {
      state.count += 1;   // immer allows mutation
    },
    decrement: (state) => {
      state.count -= 1;
    },
  },
});

export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;

store.jsx

import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "./counterSlice";

const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

export default store;

main.jsx

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'
import { Provider } from 'react-redux'
import store from './store.js'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <Provider store={store}> {/* Wrap your App inside Provider */}
    <App />
    </Provider>
  </StrictMode>,
)

App.jsx

import { useSelector, useDispatch } from "react-redux";
import { increment, decrement } from "./counterSlice";

function App() {
  const count = useSelector((state) => state.counter.count);
  const dispatch = useDispatch();

  return (
    <>
      <button onClick={() => dispatch(increment())}>+</button>
      <button onClick={() => dispatch(decrement())}>-</button>
      <h1>{count}</h1>
    </>
  );
}

export default App;

Routing

by admin

February 20, 2023

8:51 am

1 Comment on Routing

React

npm i react-router-dom

npx create-react-app routingapp

App.js

import Home from './components/Home';
import Blogs from './components/Blogs';
import Contact from './components/Contact';
import NoPage from './components/NoPage';
import { BrowserRouter, Outlet, Route, Routes } from 'react-router-dom';
import Layout from './components/Layout';

function App() {
  return (
    <>
    <h1>HELLO WORLD</h1>
    <BrowserRouter>
      <Routes>
        <Route path="/admin" element={<Layout />}>
          <Route index element={<Home />} />
          <Route path="contact" element={<Contact />} />
          <Route path="*" element={<NoPage />} />
        </Route>
        <Route path="/user" element={<Layout />}>
          <Route index element={<Home />} />
          <Route path="contact" element={<Contact />} />
          <Route path="blogs" element={<Blogs />} />
          <Route path="test" element={<div>This is test component</div>} />
          <Route path="*" element={<NoPage />} />    
        </Route>
      </Routes>
    </BrowserRouter>
    </>

  );
}

export default App;

Layout.js

import { Outlet, Link } from "react-router-dom";

export default function Layout() {
  return (
    <>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/blogs">Blogs</Link>
          </li>
          <li>
            <Link to="/contact">Contact</Link>
          </li>
        </ul>
      </nav>
      <Outlet />
    </>
  )
}

Outlet is the block where router components get loaded