A library used for global state management in JavaScript apps

npm install redux react-redux

• Store data globally
• Share data between components
• Manage form, login, cart data easily

Without Redux:

import axios from "axios";
import { useState } from "react";

function App() {

  const [name, setName] = useState("");
  const [email, setEmail] = useState("");

  const handleSubmit = () => {

    axios.post("https://example.com/api/users", {
      name: name,
      email: email
    })
    .then((response) => {
      console.log("Success:", response.data);
    })
    .catch((error) => {
      console.log("Error:", error);
    });

  };

  return (
    <div style={{ textAlign: "center" }}>

      <h2>Axios POST Example</h2>

      <input
        type="text"
        placeholder="Enter Name"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />

      <br /><br />

      <input
        type="email"
        placeholder="Enter Email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />

      <br /><br />

      <button onClick={handleSubmit}>
        Submit
      </button>

    </div>
  );
}

export default App;

With Redux:

import axios from "axios";
import { useSelector, useDispatch } from "react-redux";

function App() {

  const { name, email } = useSelector(state => state);
  const dispatch = useDispatch();

  const handleSubmit = () => {

    axios.post("https://example.com/api/users", {
      name: name,
      email: email
    })
    .then((response) => {
      console.log("Success:", response.data);
    })
    .catch((error) => {
      console.log("Error:", error);
    });

  };

  return (
    <div style={{ textAlign: "center" }}>

      <h2>Redux + Axios Form</h2>

      <input
        type="text"
        placeholder="Enter Name"
        value={name}
        onChange={(e) =>
          dispatch({ type: "SET_NAME", payload: e.target.value })
        }
      />

      <br /><br />

      <input
        type="email"
        placeholder="Enter Email"
        value={email}
        onChange={(e) =>
          dispatch({ type: "SET_EMAIL", payload: e.target.value })
        }
      />

      <br /><br />

      <button onClick={handleSubmit}>
        Submit
      </button>

    </div>
  );
}

export default App;