const [state, dispatch] = useReducer(reducer, initialState, init?);

function reducer(state, action) {
  switch (action.type) {
    case 'SOMETHING_HAPPENED':
      return { ...state, ... } // لا تعدّل state مباشرة
    default:
      return state;
  }
}

import { useReducer } from "react";

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case "increment":
      return { count: state.count + 1 };
    case "decrement":
      return { count: state.count - 1 };
    case "reset":
      return initialState;
    default:
      return state;
  }
}

export default function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div style={{ fontFamily: "sans-serif", textAlign: "center" }}>
      <h2>العدّاد: {state.count}</h2>
      <button onClick={() => dispatch({ type: "decrement" })}>-1</button>
      <button onClick={() => dispatch({ type: "increment" })} style={{ margin: "0 8px" }}>
        +1
      </button>
      <button onClick={() => dispatch({ type: "reset" })}>تصفير</button>
    </div>
  );
}

import { useReducer } from "react"
function ReducerForm() {

    const initialState = {
        name: "",
        email: ""
    }

    const reducer = (state, action) => {
        switch (action.type) {
            case "input":
                return {...state , [action.field] : action.value};
            case "reset":
                return initialState;
            default:
                return state;
        }
    }

    const [state, dispatch] = useReducer(reducer, initialState)

    const handelReset = () => {
        dispatch({ type: "reset" });
    }

    const handelChange = (e) => {
        dispatch({ 
            type: "input",
            field: e.target.name,
            value: e.target.value
        
        })
    }


    const handelSubmit = (e)=> {
        e.preventDefault();
        console.log(state)
    }
    return (
     <form action="" onSubmit={handelSubmit}>
           <div>
            <label htmlFor="">Name:</label>
            <input type="text" placeholder="Enter Name" name="name" value={state.name} onChange={handelChange} />
            <br />
            <br />
            <label htmlFor="">Email:</label>
            <input type="text" placeholder="Enter Email" name="email" value={state.email} onChange={handelChange} />
            <br />
            <br />
            <button type="submit">Send Data</button>
            <button type="button" onClick={handelReset}>Reset</button>
        </div>
     </form>
    )
}

export default ReducerForm

import { useReducer, useState } from "react";

const initialForm = {
  name: "",
  email: "",
};

function formReducer(state, action) {
  switch (action.type) {
    case "updateField": {
      const { field, value } = action.payload;
      return { ...state, [field]: value };
    }
    case "reset":
      return initialForm;
    default:
      return state;
  }
}

export default function SimpleForm() {
  const [form, dispatch] = useReducer(formReducer, initialForm);
  const [submitted, setSubmitted] = useState(null);

  function handleChange(e) {
    const { name, value } = e.target;
    dispatch({ type: "updateField", payload: { field: name, value } });
  }

  function handleSubmit(e) {
    e.preventDefault();
    // هنا “نرسل” البيانات — في مشروع حقيقي ستستدعي API
    setSubmitted(form); // للعرض فقط
  }

  return (
    <div style={{ fontFamily: "sans-serif", maxWidth: 420 }}>
      <h2>نموذج بسيط</h2>

      <form onSubmit={handleSubmit}>
        <label>
          الاسم:
          <input
            name="name"
            value={form.name}
            onChange={handleChange}
            placeholder="اكتب اسمك"
            style={{ display: "block", margin: "6px 0 12px" }}
          />
        </label>

        <label>
          الإيميل:
          <input
            name="email"
            value={form.email}
            onChange={handleChange}
            placeholder="example@mail.com"
            style={{ display: "block", margin: "6px 0 12px" }}
          />
        </label>

        <button type="submit">إرسال</button>
        <button
          type="button"
          onClick={() => dispatch({ type: "reset" })}
          style={{ marginLeft: 8 }}
        >
          مسح
        </button>
      </form>

      {submitted && (
        <div style={{ marginTop: 16 }}>
          <h3>البيانات المُرسلة:</h3>
          <pre>{JSON.stringify(submitted, null, 2)}</pre>
        </div>
      )}
    </div>
  );
}