ರಿಯಾಕ್ಟ್ useActionState: ಆಧುನಿಕ ಫಾರ್ಮ್ ನಿರ್ವಹಣೆಗೆ ಒಂದು ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿ

ವೆಬ್ ಡೆವಲಪ್‌ಮೆಂಟ್ ಜಗತ್ತು ನಿರಂತರವಾಗಿ ವಿಕಸನಗೊಳ್ಳುತ್ತಿದೆ, ಮತ್ತು ರಿಯಾಕ್ಟ್ ಪರಿಸರ ವ್ಯವಸ್ಥೆಯು ಈ ಬದಲಾವಣೆಯ ಮುಂಚೂಣಿಯಲ್ಲಿದೆ. ಇತ್ತೀಚಿನ ಆವೃತ್ತಿಗಳೊಂದಿಗೆ, ರಿಯಾಕ್ಟ್ ನಾವು ಸಂವಾದಾತ್ಮಕ ಮತ್ತು ಸ್ಥಿತಿಸ್ಥಾಪಕ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸುವ ವಿಧಾನವನ್ನು ಮೂಲಭೂತವಾಗಿ ಸುಧಾರಿಸುವ ಶಕ್ತಿಯುತ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಪರಿಚMಹಿಸಿದೆ. ಇವುಗಳಲ್ಲಿ ಅತ್ಯಂತ ಪರಿಣಾಮಕಾರಿಯಾದುದೆಂದರೆ useActionState ಹುಕ್, ಇದು ಫಾರ್ಮ್‌ಗಳು ಮತ್ತು ಅಸಿಂಕ್ರೋನಸ್ ಕಾರ್ಯಾಚರಣೆಗಳನ್ನು ನಿರ್ವಹಿಸುವಲ್ಲಿ ಒಂದು ಕ್ರಾಂತಿಕಾರಿಯಾಗಿದೆ. ಈ ಹುಕ್, ಹಿಂದೆ ಪ್ರಾಯೋಗಿಕ ಬಿಡುಗಡೆಗಳಲ್ಲಿ useFormState ಎಂದು ಕರೆಯಲ್ಪಡುತ್ತಿತ್ತು, ಈಗ ಯಾವುದೇ ಆಧುನಿಕ ರಿಯಾಕ್ಟ್ ಡೆವಲಪರ್‌ಗೆ ಸ್ಥಿರ ಮತ್ತು ಅತ್ಯಗತ್ಯ ಸಾಧನವಾಗಿದೆ.

ಈ ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿಯು ನಿಮ್ಮನ್ನು useActionState ನ ಆಳವಾದ ಅಧ್ಯಯನಕ್ಕೆ ಕರೆದೊಯ್ಯುತ್ತದೆ. ಇದು ಪರಿಹರಿಸುವ ಸಮಸ್ಯೆಗಳು, ಅದರ ಮೂಲಭೂತ ಯಂತ್ರಶಾಸ್ತ್ರ, ಮತ್ತು ಉತ್ತಮ ಬಳಕೆದಾರ ಅನುಭವಗಳನ್ನು ಸೃಷ್ಟಿಸಲು useFormStatus ನಂತಹ ಪೂರಕ ಹುಕ್‌ಗಳೊಂದಿಗೆ ಅದನ್ನು ಹೇಗೆ ಬಳಸಿಕೊಳ್ಳುವುದು ಎಂಬುದನ್ನು ನಾವು ಅನ್ವೇಷಿಸುತ್ತೇವೆ. ನೀವು ಸರಳ ಸಂಪರ್ಕ ಫಾರ್ಮ್ ಅಥವಾ ಸಂಕೀರ್ಣ, ಡೇಟಾ-ತೀವ್ರ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ನಿರ್ಮಿಸುತ್ತಿರಲಿ, useActionState ಅನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ನಿಮ್ಮ ಕೋಡನ್ನು ಸ್ವಚ್ಛ, ಹೆಚ್ಚು ಘೋಷಣಾತ್ಮಕ ಮತ್ತು ಹೆಚ್ಚು ದೃಢವಾಗಿಸುತ್ತದೆ.

ಸಮಸ್ಯೆ: ಸಾಂಪ್ರದಾಯಿಕ ಫಾರ್ಮ್ ಸ್ಟೇಟ್ ನಿರ್ವಹಣೆಯ ಸಂಕೀರ್ಣತೆ

useActionState ನ ಸೊಬಗನ್ನು ನಾವು ಪ್ರಶಂಸಿಸುವ ಮೊದಲು, ಅದು ಪರಿಹರಿಸುವ ಸವಾಲುಗಳನ್ನು ನಾವು ಮೊದಲು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಬೇಕು. ವರ್ಷಗಳಿಂದ, ರಿಯಾಕ್ಟ್‌ನಲ್ಲಿ ಫಾರ್ಮ್ ಸ್ಟೇಟ್ ನಿರ್ವಹಣೆಯು useState ಹುಕ್ ಅನ್ನು ಬಳಸಿಕೊಂಡು ಊಹಿಸಬಹುದಾದ ಆದರೆ ಆಗಾಗ್ಗೆ ತೊಡಕಿನ ಮಾದರಿಯನ್ನು ಒಳಗೊಂಡಿತ್ತು.

ಒಂದು ಸಾಮಾನ್ಯ ಸನ್ನಿವೇಶವನ್ನು ಪರಿಗಣಿಸೋಣ: ಪಟ್ಟಿಗೆ ಹೊಸ ಉತ್ಪನ್ನವನ್ನು ಸೇರಿಸಲು ಒಂದು ಸರಳ ಫಾರ್ಮ್. ನಾವು ಹಲವಾರು ಸ್ಟೇಟ್‌ಗಳನ್ನು ನಿರ್ವಹಿಸಬೇಕಾಗಿದೆ:

ಉತ್ಪನ್ನದ ಹೆಸರಿಗಾಗಿ ಇನ್‌ಪುಟ್ ಮೌಲ್ಯ.
API ಕರೆ ಸಮಯದಲ್ಲಿ ಬಳಕೆದಾರರಿಗೆ ಪ್ರತಿಕ್ರಿಯೆ ನೀಡಲು ಲೋಡಿಂಗ್ ಅಥವಾ ಪೆಂಡಿಂಗ್ ಸ್ಟೇಟ್.
ಸಲ್ಲಿಕೆ ವಿಫಲವಾದರೆ ಸಂದೇಶಗಳನ್ನು ಪ್ರದರ್ಶಿಸಲು ದೋಷದ ಸ್ಟೇಟ್.
ಪೂರ್ಣಗೊಂಡ ನಂತರ ಯಶಸ್ಸಿನ ಸ್ಟೇಟ್ ಅಥವಾ ಸಂದೇಶ.

ಒಂದು ವಿಶಿಷ್ಟವಾದ ಅನುಷ್ಠಾನವು ಈ ರೀತಿ ಕಾಣಿಸಬಹುದು:

ಉದಾಹರಣೆ: ಬಹು useState ಹುಕ್‌ಗಳೊಂದಿಗೆ 'ಹಳೆಯ ವಿಧಾನ'

// ಕಾಲ್ಪನಿಕ API ಫಂಕ್ಷನ್
const addProductAPI = async (productName) => {
await new Promise(resolve => setTimeout(resolve, 1500));
if (!productName || productName.length < 3) {
throw new Error('Product name must be at least 3 characters long.');
}
console.log(`Product "${productName}" added.`);
return { success: true };
};

// ಕಾಂಪೊನೆಂಟ್
import { useState } from 'react';

function OldProductForm() {
const [productName, setProductName] = useState('');
const [error, setError] = useState(null);
const [isPending, setIsPending] = useState(false);

const handleSubmit = async (event) => {
event.preventDefault();
setIsPending(true);
setError(null);

try {
await addProductAPI(productName);
setProductName(''); // ಯಶಸ್ವಿಯಾದಾಗ ಇನ್‌ಪುಟ್ ಅನ್ನು ತೆರವುಗೊಳಿಸಿ
} catch (err) {
setError(err.message);
} finally {
setIsPending(false);
}
};

return (

ಉತ್ಪನ್ನದ ಹೆಸರು:

      

        id="productName"

        name="productName"

        value={productName}

        onChange={(e) => setProductName(e.target.value)}

      />

      

      {error && {error}
}

    

  );

}


ಈ ವಿಧಾನವು ಕೆಲಸ ಮಾಡುತ್ತದೆ, ಆದರೆ ಇದು ಹಲವಾರು ನ್ಯೂನತೆಗಳನ್ನು ಹೊಂದಿದೆ:

  ಬಾಯ್ಲರ್‌ಪ್ಲೇಟ್: ಪರಿಕಲ್ಪನಾತ್ಮಕವಾಗಿ ಒಂದೇ ಫಾರ್ಮ್ ಸಲ್ಲಿಕೆ ಪ್ರಕ್ರಿಯೆಯನ್ನು ನಿರ್ವಹಿಸಲು ನಮಗೆ ಮೂರು ಪ್ರತ್ಯೇಕ useState ಕರೆಗಳು ಬೇಕಾಗುತ್ತವೆ.
  ಹಸ್ತಚಾಲಿತ ಸ್ಟೇಟ್ ನಿರ್ವಹಣೆ: try...catch...finally ಬ್ಲಾಕ್‌ನಲ್ಲಿ ಲೋಡಿಂಗ್ ಮತ್ತು ದೋಷದ ಸ್ಟೇಟ್‌ಗಳನ್ನು ಸರಿಯಾದ ಕ್ರಮದಲ್ಲಿ ಹಸ್ತಚಾಲಿತವಾಗಿ ಹೊಂದಿಸಲು ಮತ್ತು ಮರುಹೊಂದಿಸಲು ಡೆವಲಪರ್ ಜವಾಬ್ದಾರನಾಗಿರುತ್ತಾನೆ. ಇದು ಪುನರಾವರ್ತಿತ ಮತ್ತು ದೋಷಗಳಿಗೆ ಗುರಿಯಾಗುತ್ತದೆ.
  ಸಂಯೋಜನೆ: ಫಾರ್ಮ್ ಸಲ್ಲಿಕೆಯ ಫಲಿತಾಂಶವನ್ನು ನಿರ್ವಹಿಸುವ ತರ್ಕವು ಕಾಂಪೊನೆಂಟ್‌ನ ರೆಂಡರಿಂಗ್ ತರ್ಕದೊಂದಿಗೆ ಬಿಗಿಯಾಗಿ ಸಂಯೋಜಿಸಲ್ಪಟ್ಟಿದೆ.


useActionState ಪರಿಚಯ: ಒಂದು ಪರಿಕಲ್ಪನಾ ಬದಲಾವಣೆ

useActionState ಎಂಬುದು ಫಾರ್ಮ್ ಸಲ್ಲಿಕೆಯಂತಹ ಅಸಿಂಕ್ರೋನಸ್ ಕ್ರಿಯೆಯ ಸ್ಟೇಟ್ ಅನ್ನು ನಿರ್ವಹಿಸಲು ವಿಶೇಷವಾಗಿ ವಿನ್ಯಾಸಗೊಳಿಸಲಾದ ರಿಯಾಕ್ಟ್ ಹುಕ್ ಆಗಿದೆ. ಇದು ಸ್ಟೇಟ್ ಅನ್ನು ಕ್ರಿಯೆಯ ಫಂಕ್ಷನ್‌ನ ಫಲಿತಾಂಶಕ್ಕೆ ನೇರವಾಗಿ ಸಂಪರ್ಕಿಸುವ ಮೂಲಕ ಸಂಪೂರ್ಣ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಸುಗಮಗೊಳಿಸುತ್ತದೆ.

ಅದರ ಸಿಗ್ನೇಚರ್ ಸ್ಪಷ್ಟ ಮತ್ತು ಸಂಕ್ಷಿಪ್ತವಾಗಿದೆ:
const [state, formAction] = useActionState(actionFn, initialState);

ಅದರ ಘಟಕಗಳನ್ನು ವಿಭಜಿಸೋಣ:

  actionFn(previousState, formData): ಇದು ನಿಮ್ಮ ಅಸಿಂಕ್ರೋನಸ್ ಫಂಕ್ಷನ್ ಆಗಿದ್ದು, ಅದು ಕೆಲಸವನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ (ಉದಾಹರಣೆಗೆ, API ಗೆ ಕರೆ ಮಾಡುವುದು). ಇದು ಹಿಂದಿನ ಸ್ಟೇಟ್ ಮತ್ತು ಫಾರ್ಮ್ ಡೇಟಾವನ್ನು ಆರ್ಗ್ಯುಮೆಂಟ್‌ಗಳಾಗಿ ಪಡೆಯುತ್ತದೆ. ಮುಖ್ಯವಾಗಿ, ಈ ಫಂಕ್ಷನ್ ಏನು ರಿಟರ್ನ್ ಮಾಡುತ್ತದೆಯೋ ಅದು ಹೊಸ ಸ್ಟೇಟ್ ಆಗುತ್ತದೆ.
  initialState: ಕ್ರಿಯೆಯು ಮೊದಲ ಬಾರಿಗೆ ಕಾರ್ಯಗತಗೊಳ್ಳುವ ಮೊದಲು ಇರುವ ಸ್ಟೇಟ್‌ನ ಮೌಲ್ಯ ಇದಾಗಿದೆ.
  state: ಇದು ಪ್ರಸ್ತುತ ಸ್ಟೇಟ್ ಆಗಿದೆ. ಇದು ಆರಂಭದಲ್ಲಿ initialState ಅನ್ನು ಹೊಂದಿರುತ್ತದೆ ಮತ್ತು ಪ್ರತಿ ಕಾರ್ಯಗತಗೊಳಿಸಿದ ನಂತರ ನಿಮ್ಮ actionFn ನ ರಿಟರ್ನ್ ಮೌಲ್ಯಕ್ಕೆ ನವೀಕರಿಸಲ್ಪಡುತ್ತದೆ.
  formAction: ಇದು ನಿಮ್ಮ ಆಕ್ಷನ್ ಫಂಕ್ಷನ್‌ನ ಹೊಸ, ಸುತ್ತಿದ ಆವೃತ್ತಿಯಾಗಿದೆ. ನೀವು ಈ ಫಂಕ್ಷನ್ ಅನ್ನು <form> ಎಲಿಮೆಂಟ್‌ನ action ಪ್ರಾಪರ್ಟಿಗೆ ಪಾಸ್ ಮಾಡಬೇಕು. ರಿಯಾಕ್ಟ್ ಈ ಸುತ್ತಿದ ಫಂಕ್ಷನ್ ಅನ್ನು ಕ್ರಿಯೆಯ ಪೆಂಡಿಂಗ್ ಸ್ಟೇಟ್ ಅನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡಲು ಬಳಸುತ್ತದೆ.


ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆ: useActionState ನೊಂದಿಗೆ ರಿಫ್ಯಾಕ್ಟರಿಂಗ್

ಈಗ, ನಮ್ಮ ಉತ್ಪನ್ನ ಫಾರ್ಮ್ ಅನ್ನು useActionState ಬಳಸಿ ರಿಫ್ಯಾಕ್ಟರ್ ಮಾಡೋಣ. ಸುಧಾರಣೆಯು ತಕ್ಷಣವೇ ಗೋಚರಿಸುತ್ತದೆ.

ಮೊದಲಿಗೆ, ನಾವು ನಮ್ಮ ಆಕ್ಷನ್ ತರ್ಕವನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳಬೇಕು. ದೋಷಗಳನ್ನು ಎಸೆಯುವ ಬದಲು, ಆಕ್ಷನ್ ಫಲಿತಾಂಶವನ್ನು ವಿವರಿಸುವ ಸ್ಟೇಟ್ ಆಬ್ಜೆಕ್ಟ್ ಅನ್ನು ರಿಟರ್ನ್ ಮಾಡಬೇಕು.

ಉದಾಹರಣೆ: useActionState ನೊಂದಿಗೆ 'ಹೊಸ ವಿಧಾನ'

// useActionState ನೊಂದಿಗೆ ಕೆಲಸ ಮಾಡಲು ವಿನ್ಯಾಸಗೊಳಿಸಲಾದ ಆಕ್ಷನ್ ಫಂಕ್ಷನ್

const addProductAction = async (previousState, formData) => {

  const productName = formData.get('productName');

  await new Promise(resolve => setTimeout(resolve, 1500)); // ನೆಟ್‌ವರ್ಕ್ ವಿಳಂಬವನ್ನು ಅನುಕರಿಸಿ



  if (!productName || productName.length < 3) {

    return { message: 'ಉತ್ಪನ್ನದ ಹೆಸರು ಕನಿಷ್ಠ 3 ಅಕ್ಷರಗಳನ್ನು ಹೊಂದಿರಬೇಕು.', success: false };

  }



  console.log(`ಉತ್ಪನ್ನ "${productName}" ಸೇರಿಸಲಾಗಿದೆ.`);

  // ಯಶಸ್ವಿಯಾದಾಗ, ಯಶಸ್ಸಿನ ಸಂದೇಶವನ್ನು ಹಿಂತಿರುಗಿಸಿ ಮತ್ತು ಫಾರ್ಮ್ ಅನ್ನು ತೆರವುಗೊಳಿಸಿ.

  return { message: `"${productName}" ಅನ್ನು ಯಶಸ್ವಿಯಾಗಿ ಸೇರಿಸಲಾಗಿದೆ`, success: true };

};


// ರಿಫ್ಯಾಕ್ಟರ್ ಮಾಡಿದ ಕಾಂಪೊನೆಂಟ್

import { useActionState } from 'react';

// ಗಮನಿಸಿ: ಪೆಂಡಿಂಗ್ ಸ್ಟೇಟ್ ಅನ್ನು ನಿರ್ವಹಿಸಲು ನಾವು ಮುಂದಿನ ವಿಭಾಗದಲ್ಲಿ useFormStatus ಅನ್ನು ಸೇರಿಸುತ್ತೇವೆ.



function NewProductForm() {

  const initialState = { message: null, success: false };

  const [state, formAction] = useActionState(addProductAction, initialState);



  return (

    


      ಉತ್ಪನ್ನದ ಹೆಸರು:

      

      

      {!state.success && state.message && (

        {state.message}

      )}

      {state.success && state.message && (

        {state.message}

      )}

    

  );

}


ಇದು ಎಷ್ಟು ಸ್ವಚ್ಛವಾಗಿದೆ ಎಂದು ನೋಡಿ! ನಾವು ಮೂರು useState ಹುಕ್‌ಗಳನ್ನು ಒಂದೇ useActionState ಹುಕ್‌ನೊಂದಿಗೆ ಬದಲಾಯಿಸಿದ್ದೇವೆ. ಈಗ ಕಾಂಪೊನೆಂಟ್‌ನ ಜವಾಬ್ದಾರಿಯು `state` ಆಬ್ಜೆಕ್ಟ್ ಆಧಾರದ ಮೇಲೆ UI ಅನ್ನು ರೆಂಡರ್ ಮಾಡುವುದು ಮಾತ್ರ. ಎಲ್ಲಾ ಬಿಸಿನೆಸ್ ತರ್ಕವು `addProductAction` ಫಂಕ್ಷನ್‌ನಲ್ಲಿ ಅಚ್ಚುಕಟ್ಟಾಗಿ ಸುತ್ತುವರಿಯಲ್ಪಟ್ಟಿದೆ. ಆಕ್ಷನ್ ಏನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ ಎಂಬುದರ ಆಧಾರದ ಮೇಲೆ ಸ್ಟೇಟ್ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ನವೀಕರಿಸಲ್ಪಡುತ್ತದೆ.

ಆದರೆ ನಿಲ್ಲಿ, ಪೆಂಡಿಂಗ್ ಸ್ಟೇಟ್ ಬಗ್ಗೆ ಏನು? ಫಾರ್ಮ್ ಸಲ್ಲಿಸುತ್ತಿರುವಾಗ ನಾವು ಬಟನ್ ಅನ್ನು ಹೇಗೆ ನಿಷ್ಕ್ರಿಯಗೊಳಿಸುವುದು?

useFormStatus ನೊಂದಿಗೆ ಪೆಂಡಿಂಗ್ ಸ್ಟೇಟ್‌ಗಳನ್ನು ನಿರ್ವಹಿಸುವುದು

ರಿಯಾಕ್ಟ್ ಈ ನಿಖರವಾದ ಸಮಸ್ಯೆಯನ್ನು ಪರಿಹರಿಸಲು ವಿನ್ಯಾಸಗೊಳಿಸಲಾದ ಒಂದು ಸಹವರ್ತಿ ಹುಕ್, useFormStatus ಅನ್ನು ಒದಗಿಸುತ್ತದೆ. ಇದು ಕೊನೆಯ ಫಾರ್ಮ್ ಸಲ್ಲಿಕೆಯ ಸ್ಥಿತಿ ಮಾಹಿತಿಯನ್ನು ಒದಗಿಸುತ್ತದೆ, ಆದರೆ ಒಂದು ನಿರ್ಣಾಯಕ ನಿಯಮದೊಂದಿಗೆ: ಇದನ್ನು ನೀವು ಟ್ರ್ಯಾಕ್ ಮಾಡಲು ಬಯಸುವ <form> ನ ಒಳಗೆ ರೆಂಡರ್ ಮಾಡಲಾದ ಕಾಂಪೊನೆಂಟ್‌ನಿಂದ ಕರೆಯಬೇಕು.

ಇದು ಕಾಳಜಿಗಳ ಸ್ಪಷ್ಟ ಪ್ರತ್ಯೇಕತೆಯನ್ನು ಪ್ರೋತ್ಸಾಹಿಸುತ್ತದೆ. ಫಾರ್ಮ್‌ನ ಸಲ್ಲಿಕೆ ಸ್ಥಿತಿಯ ಬಗ್ಗೆ ತಿಳಿದಿರಬೇಕಾದ UI ಎಲಿಮೆಂಟ್‌ಗಳಿಗಾಗಿ, ಉದಾಹರಣೆಗೆ ಸಬ್ಮಿಟ್ ಬಟನ್, ನೀವು ನಿರ್ದಿಷ್ಟವಾಗಿ ಒಂದು ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ರಚಿಸುತ್ತೀರಿ.

useFormStatus ಹುಕ್ ಹಲವಾರು ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಹೊಂದಿರುವ ಆಬ್ಜೆಕ್ಟ್ ಅನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ, ಅದರಲ್ಲಿ ಪ್ರಮುಖವಾದುದು `pending`.
const { pending, data, method, action } = useFormStatus();

  pending: ಪೇರೆಂಟ್ ಫಾರ್ಮ್ ಪ್ರಸ್ತುತ ಸಲ್ಲಿಸುತ್ತಿದ್ದರೆ `true` ಮತ್ತು ಇಲ್ಲದಿದ್ದರೆ `false` ಆಗಿರುವ ಒಂದು ಬೂಲಿಯನ್.
  data: ಸಲ್ಲಿಸಲಾಗುತ್ತಿರುವ ಡೇಟಾವನ್ನು ಒಳಗೊಂಡಿರುವ `FormData` ಆಬ್ಜೆಕ್ಟ್.
  method: HTTP ವಿಧಾನವನ್ನು ಸೂಚಿಸುವ ಸ್ಟ್ರಿಂಗ್ (`'get'` ಅಥವಾ `'post'`).
  action: ಫಾರ್ಮ್‌ನ `action` ಪ್ರಾಪರ್ಟಿಗೆ ಪಾಸ್ ಮಾಡಿದ ಫಂಕ್ಷನ್‌ಗೆ ಒಂದು ರೆಫರೆನ್ಸ್.


ಸ್ಥಿತಿ-ಅರಿವಿನ ಸಬ್ಮಿಟ್ ಬಟನ್ ಅನ್ನು ರಚಿಸುವುದು

ನಾವು ಒಂದು ಮೀಸಲಾದ `SubmitButton` ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ರಚಿಸೋಣ ಮತ್ತು ಅದನ್ನು ನಮ್ಮ ಫಾರ್ಮ್‌ನಲ್ಲಿ ಸಂಯೋಜಿಸೋಣ.

ಉದಾಹರಣೆ: SubmitButton ಕಾಂಪೊನೆಂಟ್
import { useFormStatus } from 'react-dom';

// ಗಮನಿಸಿ: useFormStatus ಅನ್ನು 'react' ನಿಂದಲ್ಲ, 'react-dom' ನಿಂದ ಇಂಪೋರ್ಟ್ ಮಾಡಲಾಗಿದೆ.



function SubmitButton() {

  const { pending } = useFormStatus();



  return (

    

  );

}


ಈಗ, ನಾವು ಅದನ್ನು ಬಳಸಲು ನಮ್ಮ ಮುಖ್ಯ ಫಾರ್ಮ್ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ನವೀಕರಿಸಬಹುದು.

ಉದಾಹರಣೆ: useActionState ಮತ್ತು useFormStatus ನೊಂದಿಗೆ ಸಂಪೂರ್ಣ ಫಾರ್ಮ್
import { useActionState } from 'react';

import { useFormStatus } from 'react-dom';



// ... (addProductAction ಫಂಕ್ಷನ್ ಹಾಗೆಯೇ ಉಳಿಯುತ್ತದೆ)



function SubmitButton() { /* ... ಮೇಲೆ ವ್ಯಾಖ್ಯಾನಿಸಿದಂತೆ ... */ }



function CompleteProductForm() {

  const initialState = { message: null, success: false };

  const [state, formAction] = useActionState(addProductAction, initialState);



  return (

    


      ಉತ್ಪನ್ನದ ಹೆಸರು:

      {/* ಯಶಸ್ವಿಯಾದಾಗ ಇನ್‌ಪುಟ್ ಅನ್ನು ಮರುಹೊಂದಿಸಲು ನಾವು ಕೀ (key) ಸೇರಿಸಬಹುದು */}

      

      

      {!state.success && state.message && (

        {state.message}

      )}

      {state.success && state.message && (

        {state.message}

      )}

    

  );

}


ಈ ರಚನೆಯೊಂದಿಗೆ, `CompleteProductForm` ಕಾಂಪೊನೆಂಟ್ ಪೆಂಡಿಂಗ್ ಸ್ಟೇಟ್ ಬಗ್ಗೆ ಏನನ್ನೂ ತಿಳಿದುಕೊಳ್ಳುವ ಅಗತ್ಯವಿಲ್ಲ. `SubmitButton` ಸಂಪೂರ್ಣವಾಗಿ ಸ್ವಯಂ-ಒಳಗೊಂಡಿದೆ. ಈ ಸಂಯೋಜಿತ ಮಾದರಿಯು ಸಂಕೀರ್ಣ, ನಿರ್ವಹಿಸಬಲ್ಲ UI ಗಳನ್ನು ನಿರ್ಮಿಸಲು ನಂಬಲಾಗದಷ್ಟು ಶಕ್ತಿಯುತವಾಗಿದೆ.

ಪ್ರೊಗ್ರೆಸ್ಸಿವ್ ಎನ್ಹಾನ್ಸ್ಮೆಂಟ್‌ನ ಶಕ್ತಿ

ಈ ಹೊಸ ಆಕ್ಷನ್-ಆಧಾರಿತ ವಿಧಾನದ ಅತ್ಯಂತ ಆಳವಾದ ಪ್ರಯೋಜನಗಳಲ್ಲಿ ಒಂದು, ವಿಶೇಷವಾಗಿ ಸರ್ವರ್ ಆಕ್ಷನ್‌ಗಳೊಂದಿಗೆ ಬಳಸಿದಾಗ, ಸ್ವಯಂಚಾಲಿತ ಪ್ರೊಗ್ರೆಸ್ಸಿವ್ ಎನ್ಹಾನ್ಸ್ಮೆಂಟ್ ಆಗಿದೆ. ಇದು ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರಿಗಾಗಿ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ಒಂದು ಪ್ರಮುಖ ಪರಿಕಲ್ಪನೆಯಾಗಿದೆ, ಅಲ್ಲಿ ನೆಟ್‌ವರ್ಕ್ ಪರಿಸ್ಥಿತಿಗಳು ವಿಶ್ವಾಸಾರ್ಹವಲ್ಲದಿರಬಹುದು ಮತ್ತು ಬಳಕೆದಾರರು ಹಳೆಯ ಸಾಧನಗಳನ್ನು ಹೊಂದಿರಬಹುದು ಅಥವಾ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿರಬಹುದು.

ಇದು ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ ಎಂಬುದು ಇಲ್ಲಿದೆ:

  ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಇಲ್ಲದೆ: ಬಳಕೆದಾರರ ಬ್ರೌಸರ್ ಕ್ಲೈಂಟ್-ಸೈಡ್ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸದಿದ್ದರೆ, <form action={...}> ಪ್ರಮಾಣಿತ HTML ಫಾರ್ಮ್‌ನಂತೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ. ಇದು ಸರ್ವರ್‌ಗೆ ಪೂರ್ಣ-ಪುಟದ ವಿನಂತಿಯನ್ನು ಮಾಡುತ್ತದೆ. ನೀವು Next.js ನಂತಹ ಫ್ರೇಮ್‌ವರ್ಕ್ ಬಳಸುತ್ತಿದ್ದರೆ, ಸರ್ವರ್-ಸೈಡ್ ಆಕ್ಷನ್ ರನ್ ಆಗುತ್ತದೆ, ಮತ್ತು ಫ್ರೇಮ್‌ವರ್ಕ್ ಸಂಪೂರ್ಣ ಪುಟವನ್ನು ಹೊಸ ಸ್ಟೇಟ್‌ನೊಂದಿಗೆ ಮರು-ರೆಂಡರ್ ಮಾಡುತ್ತದೆ (ಉದಾಹರಣೆಗೆ, ಮೌಲ್ಯೀಕರಣ ದೋಷವನ್ನು ತೋರಿಸುವುದು). ಅಪ್ಲಿಕೇಶನ್ ಸಂಪೂರ್ಣವಾಗಿ ಕ್ರಿಯಾತ್ಮಕವಾಗಿರುತ್ತದೆ, ಕೇವಲ SPA-ರೀತಿಯ ಸುಗಮತೆಯಿಲ್ಲದೆ.
  ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನೊಂದಿಗೆ: ಒಮ್ಮೆ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಂಡಲ್ ಲೋಡ್ ಆಗಿ ಮತ್ತು ರಿಯಾಕ್ಟ್ ಪುಟವನ್ನು ಹೈಡ್ರೇಟ್ ಮಾಡಿದ ನಂತರ, ಅದೇ formAction ಕ್ಲೈಂಟ್-ಸೈಡ್‌ನಲ್ಲಿ ಕಾರ್ಯಗತಗೊಳ್ಳುತ್ತದೆ. ಪೂರ್ಣ-ಪುಟದ ಮರುಲೋಡ್‌ನ ಬದಲು, ಇದು ವಿಶಿಷ್ಟವಾದ ಫೆಚ್ ವಿನಂತಿಯಂತೆ ವರ್ತಿಸುತ್ತದೆ. ಆಕ್ಷನ್ ಅನ್ನು ಕರೆಯಲಾಗುತ್ತದೆ, ಸ್ಟೇಟ್ ಅನ್ನು ನವೀಕರಿಸಲಾಗುತ್ತದೆ, ಮತ್ತು ಕಾಂಪೊನೆಂಟ್‌ನ ಅಗತ್ಯ ಭಾಗಗಳು ಮಾತ್ರ ಮರು-ರೆಂಡರ್ ಆಗುತ್ತವೆ.


ಇದರರ್ಥ ನೀವು ನಿಮ್ಮ ಫಾರ್ಮ್ ತರ್ಕವನ್ನು ಒಮ್ಮೆ ಬರೆಯುತ್ತೀರಿ, ಮತ್ತು ಅದು ಎರಡೂ ಸನ್ನಿವೇಶಗಳಲ್ಲಿ ಮನಬಂದಂತೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ. ನೀವು ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ ಸ್ಥಿತಿಸ್ಥಾಪಕ, ಪ್ರವೇಶಿಸಬಹುದಾದ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ನಿರ್ಮಿಸುತ್ತೀರಿ, ಇದು ಪ್ರಪಂಚದಾದ್ಯಂತ ಬಳಕೆದಾರರ ಅನುಭವಕ್ಕೆ ಒಂದು ದೊಡ್ಡ ಗೆಲುವಾಗಿದೆ.

ಸುಧಾರಿತ ಮಾದರಿಗಳು ಮತ್ತು ಬಳಕೆಯ ಪ್ರಕರಣಗಳು

1. ಸರ್ವರ್ ಆಕ್ಷನ್‌ಗಳು vs. ಕ್ಲೈಂಟ್ ಆಕ್ಷನ್‌ಗಳು
ನೀವು useActionState ಗೆ ಪಾಸ್ ಮಾಡುವ `actionFn` ಪ್ರಮಾಣಿತ ಕ್ಲೈಂಟ್-ಸೈಡ್ ಅಸಿಂಕ್ ಫಂಕ್ಷನ್ (ನಮ್ಮ ಉದಾಹರಣೆಗಳಲ್ಲಿರುವಂತೆ) ಅಥವಾ ಸರ್ವರ್ ಆಕ್ಷನ್ ಆಗಿರಬಹುದು. ಸರ್ವರ್ ಆಕ್ಷನ್ ಎಂದರೆ ಸರ್ವರ್‌ನಲ್ಲಿ ವ್ಯಾಖ್ಯಾನಿಸಲಾದ ಫಂಕ್ಷನ್ ಆಗಿದ್ದು, ಅದನ್ನು ಕ್ಲೈಂಟ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳಿಂದ ನೇರವಾಗಿ ಕರೆಯಬಹುದು. Next.js ನಂತಹ ಫ್ರೇಮ್‌ವರ್ಕ್‌ಗಳಲ್ಲಿ, ನೀವು ಫಂಕ್ಷನ್ ಬಾಡಿಯ ಮೇಲ್ಭಾಗದಲ್ಲಿ "use server"; ನಿರ್ದೇಶನವನ್ನು ಸೇರಿಸುವ ಮೂಲಕ ಒಂದನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತೀರಿ.


  ಕ್ಲೈಂಟ್ ಆಕ್ಷನ್‌ಗಳು: ಕೇವಲ ಕ್ಲೈಂಟ್-ಸೈಡ್ ಸ್ಟೇಟ್ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರುವ ಅಥವಾ ಕ್ಲೈಂಟ್‌ನಿಂದ ನೇರವಾಗಿ ಮೂರನೇ-ಪಕ್ಷದ API ಗಳಿಗೆ ಕರೆ ಮಾಡುವ ರೂಪಾಂತರಗಳಿಗೆ ಸೂಕ್ತವಾಗಿದೆ.
  ಸರ್ವರ್ ಆಕ್ಷನ್‌ಗಳು: ಡೇಟಾಬೇಸ್ ಅಥವಾ ಇತರ ಸರ್ವರ್-ಸೈಡ್ ಸಂಪನ್ಮೂಲಗಳನ್ನು ಒಳಗೊಂಡಿರುವ ರೂಪಾಂತರಗಳಿಗೆ ಪರಿಪೂರ್ಣ. ಪ್ರತಿ ರೂಪಾಂತರಕ್ಕಾಗಿ API ಎಂಡ್‌ಪಾಯಿಂಟ್‌ಗಳನ್ನು ಹಸ್ತಚಾಲಿತವಾಗಿ ರಚಿಸುವ ಅಗತ್ಯವನ್ನು ನಿವಾರಿಸುವ ಮೂಲಕ ಅವು ನಿಮ್ಮ ಆರ್ಕಿಟೆಕ್ಚರ್ ಅನ್ನು ಸರಳಗೊಳಿಸುತ್ತವೆ.


ಸೌಂದರ್ಯವೆಂದರೆ useActionState ಎರಡರೊಂದಿಗೂ ಒಂದೇ ರೀತಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ. ನೀವು ಕಾಂಪೊನೆಂಟ್ ಕೋಡ್ ಅನ್ನು ಬದಲಾಯಿಸದೆ ಕ್ಲೈಂಟ್ ಆಕ್ಷನ್ ಅನ್ನು ಸರ್ವರ್ ಆಕ್ಷನ್‌ಗಾಗಿ ಬದಲಾಯಿಸಬಹುದು.

2. `useOptimistic` ನೊಂದಿಗೆ ಆಶಾವಾದಿ ನವೀಕರಣಗಳು
ಇನ್ನೂ ಹೆಚ್ಚು ಸ್ಪಂದನಾಶೀಲ ಅನುಭವಕ್ಕಾಗಿ, ನೀವು useActionState ಅನ್ನು useOptimistic ಹುಕ್‌ನೊಂದಿಗೆ ಸಂಯೋಜಿಸಬಹುದು. ಆಶಾವಾದಿ ನವೀಕರಣ ಎಂದರೆ ನೀವು ಅಸಿಂಕ್ರೋನಸ್ ಕ್ರಿಯೆಯು ಯಶಸ್ವಿಯಾಗುತ್ತದೆ ಎಂದು *ಊಹಿಸಿ*, ತಕ್ಷಣವೇ UI ಅನ್ನು ನವೀಕರಿಸುವುದು. ಅದು ವಿಫಲವಾದರೆ, ನೀವು UI ಅನ್ನು ಅದರ ಹಿಂದಿನ ಸ್ಥಿತಿಗೆ ಹಿಂತಿರುಗಿಸುತ್ತೀರಿ.

ನೀವು ಕಾಮೆಂಟ್ ಸೇರಿಸುವ ಸಾಮಾಜಿಕ ಮಾಧ್ಯಮ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಕಲ್ಪಿಸಿಕೊಳ್ಳಿ. ಆಶಾವಾದಿಯಾಗಿ, ಸರ್ವರ್‌ಗೆ ವಿನಂತಿಯನ್ನು ಕಳುಹಿಸುತ್ತಿರುವಾಗ ನೀವು ಪಟ್ಟಿಯಲ್ಲಿ ಹೊಸ ಕಾಮೆಂಟ್ ಅನ್ನು ತಕ್ಷಣವೇ ತೋರಿಸುತ್ತೀರಿ. useOptimistic ಅನ್ನು ಈ ಮಾದರಿಯನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲು ನೇರವಾಗಿ ಮಾಡಲು ಆಕ್ಷನ್‌ಗಳೊಂದಿಗೆ ಕೈಜೋಡಿಸಲು ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ.

3. ಯಶಸ್ಸಿನ ಮೇಲೆ ಫಾರ್ಮ್ ಅನ್ನು ಮರುಹೊಂದಿಸುವುದು
ಯಶಸ್ವಿ ಸಲ್ಲಿಕೆಯ ನಂತರ ಫಾರ್ಮ್ ಇನ್‌ಪುಟ್‌ಗಳನ್ನು ತೆರವುಗೊಳಿಸುವುದು ಒಂದು ಸಾಮಾನ್ಯ ಅವಶ್ಯಕತೆಯಾಗಿದೆ. useActionState ನೊಂದಿಗೆ ಇದನ್ನು ಸಾಧಿಸಲು ಕೆಲವು ಮಾರ್ಗಗಳಿವೆ.


  ಕೀ ಪ್ರಾಪರ್ಟಿ ಟ್ರಿಕ್: ನಮ್ಮ `CompleteProductForm` ಉದಾಹರಣೆಯಲ್ಲಿ ತೋರಿಸಿದಂತೆ, ನೀವು ಇನ್‌ಪುಟ್ ಅಥವಾ ಸಂಪೂರ್ಣ ಫಾರ್ಮ್‌ಗೆ ಒಂದು ಅನನ್ಯ `key` ಅನ್ನು ನಿಯೋಜಿಸಬಹುದು. ಕೀ ಬದಲಾದಾಗ, ರಿಯಾಕ್ಟ್ ಹಳೆಯ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಅನ್‌ಮೌಂಟ್ ಮಾಡುತ್ತದೆ ಮತ್ತು ಹೊಸದನ್ನು ಮೌಂಟ್ ಮಾಡುತ್ತದೆ, ಅದರ ಸ್ಟೇಟ್ ಅನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಮರುಹೊಂದಿಸುತ್ತದೆ. ಯಶಸ್ಸಿನ ಫ್ಲ್ಯಾಗ್‌ಗೆ ಕೀಯನ್ನು ಕಟ್ಟುವುದು (`key={state.success ? 'success' : 'initial'}`) ಒಂದು ಸರಳ ಮತ್ತು ಪರಿಣಾಮಕಾರಿ ವಿಧಾನವಾಗಿದೆ.
  ನಿಯಂತ್ರಿತ ಕಾಂಪೊನೆಂಟ್‌ಗಳು: ಅಗತ್ಯವಿದ್ದರೆ ನೀವು ಇನ್ನೂ ನಿಯಂತ್ರಿತ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಬಳಸಬಹುದು. ಇನ್‌ಪುಟ್‌ನ ಮೌಲ್ಯವನ್ನು useState ನೊಂದಿಗೆ ನಿರ್ವಹಿಸುವ ಮೂಲಕ, useActionState ನಿಂದ ಯಶಸ್ಸಿನ ಸ್ಟೇಟ್ ಅನ್ನು ಕೇಳುವ useEffect ಒಳಗೆ ಅದನ್ನು ತೆರವುಗೊಳಿಸಲು ನೀವು ಸೆಟ್ಟರ್ ಫಂಕ್ಷನ್ ಅನ್ನು ಕರೆಯಬಹುದು.


ಸಾಮಾನ್ಯ ಅಪಾಯಗಳು ಮತ್ತು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು


  useFormStatus ನ ನಿಯೋಜನೆ: ನೆನಪಿಡಿ, useFormStatus ಅನ್ನು ಕರೆಯುವ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು <form> ನ ಚೈಲ್ಡ್ ಆಗಿ ರೆಂಡರ್ ಮಾಡಬೇಕು. ಅದು ಸಿಬ್ಲಿಂಗ್ ಅಥವಾ ಪೇರೆಂಟ್ ಆಗಿದ್ದರೆ ಅದು ಕೆಲಸ ಮಾಡುವುದಿಲ್ಲ.
  ಸೀರಿಯಲೈಜ್ ಮಾಡಬಹುದಾದ ಸ್ಟೇಟ್: ಸರ್ವರ್ ಆಕ್ಷನ್‌ಗಳನ್ನು ಬಳಸುವಾಗ, ನಿಮ್ಮ ಆಕ್ಷನ್‌ನಿಂದ ಹಿಂತಿರುಗಿದ ಸ್ಟೇಟ್ ಆಬ್ಜೆಕ್ಟ್ ಸೀರಿಯಲೈಜ್ ಮಾಡಬಹುದಾದಂತಿರಬೇಕು. ಅಂದರೆ ಅದರಲ್ಲಿ ಫಂಕ್ಷನ್‌ಗಳು, ಸಿಂಬಲ್‌ಗಳು, ಅಥವಾ ಇತರ ಸೀರಿಯಲೈಜ್ ಮಾಡಲಾಗದ ಮೌಲ್ಯಗಳನ್ನು ಒಳಗೊಂಡಿರಬಾರದು. ಸರಳ ಆಬ್ಜೆಕ್ಟ್‌ಗಳು, ಅರೇಗಳು, ಸ್ಟ್ರಿಂಗ್‌ಗಳು, ಸಂಖ್ಯೆಗಳು ಮತ್ತು ಬೂಲಿಯನ್‌ಗಳಿಗೆ ಅಂಟಿಕೊಳ್ಳಿ.
  ಆಕ್ಷನ್‌ಗಳಲ್ಲಿ ಎಸೆಯಬೇಡಿ: `throw new Error()` ಬದಲು, ನಿಮ್ಮ ಆಕ್ಷನ್ ಫಂಕ್ಷನ್ ದೋಷಗಳನ್ನು ಸೌಮ್ಯವಾಗಿ ನಿಭಾಯಿಸಬೇಕು ಮತ್ತು ದೋಷವನ್ನು ವಿವರಿಸುವ ಸ್ಟೇಟ್ ಆಬ್ಜೆಕ್ಟ್ ಅನ್ನು ಹಿಂತಿರುಗಿಸಬೇಕು (ಉದಾ., `{ success: false, message: 'ಒಂದು ದೋಷ ಸಂಭವಿಸಿದೆ' }`). ಇದು ಸ್ಟೇಟ್ ಯಾವಾಗಲೂ ಊಹಿಸಬಹುದಾದಂತೆ ನವೀಕರಿಸಲ್ಪಡುವುದನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ.
  ಸ್ಪಷ್ಟ ಸ್ಟೇಟ್ ಆಕಾರವನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಿ: ಆರಂಭದಿಂದಲೇ ನಿಮ್ಮ ಸ್ಟೇಟ್ ಆಬ್ಜೆಕ್ಟ್‌ಗೆ ಸ್ಥಿರವಾದ ರಚನೆಯನ್ನು ಸ್ಥಾಪಿಸಿ. `{ data: T | null, message: string | null, success: boolean, errors: Record | null }` ನಂತಹ ಆಕಾರವು ಅನೇಕ ಬಳಕೆಯ ಪ್ರಕರಣಗಳನ್ನು ಒಳಗೊಳ್ಳಬಹುದು.


useActionState vs. useReducer: ಒಂದು ತ್ವರಿತ ಹೋಲಿಕೆ

ಮೊದಲ ನೋಟದಲ್ಲಿ, useActionState useReducer ಗೆ ಹೋಲುತ್ತದೆ ಎಂದು ತೋರಬಹುದು, ಏಕೆಂದರೆ ಎರಡೂ ಹಿಂದಿನ ಸ್ಟೇಟ್ ಆಧಾರದ ಮೇಲೆ ಸ್ಟೇಟ್ ಅನ್ನು ನವೀಕರಿಸುವುದನ್ನು ಒಳಗೊಂಡಿರುತ್ತವೆ. ಆದಾಗ್ಯೂ, ಅವು ವಿಭಿನ್ನ ಉದ್ದೇಶಗಳನ್ನು ಪೂರೈಸುತ್ತವೆ.


  useReducer ಎಂಬುದು ಕ್ಲೈಂಟ್-ಸೈಡ್‌ನಲ್ಲಿ ಸಂಕೀರ್ಣ ಸ್ಟೇಟ್ ಪರಿವರ್ತನೆಗಳನ್ನು ನಿರ್ವಹಿಸಲು ಒಂದು ಸಾಮಾನ್ಯ-ಉದ್ದೇಶದ ಹುಕ್ ಆಗಿದೆ. ಇದು ಆಕ್ಷನ್‌ಗಳನ್ನು ಡಿಸ್ಪ್ಯಾಚ್ ಮಾಡುವುದರಿಂದ ಪ್ರಚೋದಿಸಲ್ಪಡುತ್ತದೆ ಮತ್ತು ಅನೇಕ ಸಂಭವನೀಯ, ಸಿಂಕ್ರೋನಸ್ ಸ್ಟೇಟ್ ಬದಲಾವಣೆಗಳನ್ನು ಹೊಂದಿರುವ ಸ್ಟೇಟ್ ತರ್ಕಕ್ಕೆ ಸೂಕ್ತವಾಗಿದೆ (ಉದಾ., ಸಂಕೀರ್ಣ ಬಹು-ಹಂತದ ವಿಝಾರ್ಡ್).
  useActionState ಎಂಬುದು ಒಂದೇ, ಸಾಮಾನ್ಯವಾಗಿ ಅಸಿಂಕ್ರೋನಸ್ ಕ್ರಿಯೆಗೆ ಪ್ರತಿಕ್ರಿಯೆಯಾಗಿ ಬದಲಾಗುವ ಸ್ಟೇಟ್‌ಗಾಗಿ ವಿನ್ಯಾಸಗೊಳಿಸಲಾದ ಒಂದು ವಿಶೇಷ ಹುಕ್ ಆಗಿದೆ. ಇದರ ಪ್ರಾಥಮಿಕ ಪಾತ್ರವೆಂದರೆ HTML ಫಾರ್ಮ್‌ಗಳು, ಸರ್ವರ್ ಆಕ್ಷನ್‌ಗಳು, ಮತ್ತು ಪೆಂಡಿಂಗ್ ಸ್ಟೇಟ್ ಪರಿವರ್ತನೆಗಳಂತಹ ರಿಯಾಕ್ಟ್‌ನ ಏಕಕಾಲೀನ ರೆಂಡರಿಂಗ್ ವೈಶಿಷ್ಟ್ಯಗಳೊಂದಿಗೆ ಸಂಯೋಜಿಸುವುದು.


ತಿರುಳು: ಫಾರ್ಮ್ ಸಲ್ಲಿಕೆಗಳು ಮತ್ತು ಫಾರ್ಮ್‌ಗಳಿಗೆ ಸಂಬಂಧಿಸಿದ ಅಸಿಂಕ್ ಕಾರ್ಯಾಚರಣೆಗಳಿಗಾಗಿ, useActionState ಆಧುನಿಕ, ಉದ್ದೇಶ-ನಿರ್ಮಿತ ಸಾಧನವಾಗಿದೆ. ಇತರ ಸಂಕೀರ್ಣ, ಕ್ಲೈಂಟ್-ಸೈಡ್ ಸ್ಟೇಟ್ ಮೆಷಿನ್‌ಗಳಿಗಾಗಿ, useReducer ಒಂದು ಅತ್ಯುತ್ತಮ ಆಯ್ಕೆಯಾಗಿ ಉಳಿದಿದೆ.

ತೀರ್ಮಾನ: ರಿಯಾಕ್ಟ್ ಫಾರ್ಮ್‌ಗಳ ಭವಿಷ್ಯವನ್ನು ಅಪ್ಪಿಕೊಳ್ಳುವುದು

useActionState ಹುಕ್ ಕೇವಲ ಒಂದು ಹೊಸ API ಗಿಂತ ಹೆಚ್ಚಾಗಿದೆ; ಇದು ರಿಯಾಕ್ಟ್‌ನಲ್ಲಿ ಫಾರ್ಮ್‌ಗಳು ಮತ್ತು ಡೇಟಾ ರೂಪಾಂತರಗಳನ್ನು ನಿರ್ವಹಿಸುವ ಹೆಚ್ಚು ದೃಢವಾದ, ಘೋಷಣಾತ್ಮಕ ಮತ್ತು ಬಳಕೆದಾರ-ಕೇಂದ್ರಿತ ವಿಧಾನದತ್ತ ಒಂದು ಮೂಲಭೂತ ಬದಲಾವಣೆಯನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ. ಅದನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳುವ ಮೂಲಕ, ನೀವು ಪಡೆಯುತ್ತೀರಿ:


  ಕಡಿಮೆಯಾದ ಬಾಯ್ಲರ್‌ಪ್ಲೇಟ್: ಒಂದೇ ಹುಕ್ ಬಹು useState ಕರೆಗಳು ಮತ್ತು ಹಸ್ತಚಾಲಿತ ಸ್ಟೇಟ್ ಸಂಯೋಜನೆಯನ್ನು ಬದಲಾಯಿಸುತ್ತದೆ.
  ಸಂಯೋಜಿತ ಪೆಂಡಿಂಗ್ ಸ್ಟೇಟ್‌ಗಳು: ಸಹವರ್ತಿ useFormStatus ಹುಕ್‌ನೊಂದಿಗೆ ಲೋಡಿಂಗ್ UI ಗಳನ್ನು ಮನಬಂದಂತೆ ನಿರ್ವಹಿಸಿ.
  ಅಂತರ್ನಿರ್ಮಿತ ಪ್ರೊಗ್ರೆಸ್ಸಿವ್ ಎನ್ಹಾನ್ಸ್ಮೆಂಟ್: ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನೊಂದಿಗೆ ಅಥವಾ ಇಲ್ಲದೆ ಕೆಲಸ ಮಾಡುವ ಕೋಡ್ ಬರೆಯಿರಿ, ಎಲ್ಲಾ ಬಳಕೆದಾರರಿಗೆ ಪ್ರವೇಶ ಮತ್ತು ಸ್ಥಿತಿಸ್ಥಾಪಕತ್ವವನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.
  ಸರಳೀಕೃತ ಸರ್ವರ್ ಸಂವಹನ: ಸರ್ವರ್ ಆಕ್ಷನ್‌ಗಳಿಗೆ ಒಂದು ನೈಸರ್ಗಿಕ ಹೊಂದಾಣಿಕೆ, ಪೂರ್ಣ-ಸ್ಟಾಕ್ ಡೆವಲಪ್‌ಮೆಂಟ್ ಅನುಭವವನ್ನು ಸುಗಮಗೊಳಿಸುತ್ತದೆ.


ನೀವು ಹೊಸ ಯೋಜನೆಗಳನ್ನು ಪ್ರಾರಂಭಿಸುವಾಗ ಅಥವಾ ಅಸ್ತಿತ್ವದಲ್ಲಿರುವವುಗಳನ್ನು ರಿಫ್ಯಾಕ್ಟರ್ ಮಾಡುವಾಗ, useActionState ಅನ್ನು ಬಳಸಲು ಪರಿಗಣಿಸಿ. ಇದು ನಿಮ್ಮ ಕೋಡನ್ನು ಸ್ವಚ್ಛ ಮತ್ತು ಹೆಚ್ಚು ಊಹಿಸಬಹುದಾದಂತೆ ಮಾಡುವ ಮೂಲಕ ನಿಮ್ಮ ಡೆವಲಪರ್ ಅನುಭವವನ್ನು ಸುಧಾರಿಸುವುದಲ್ಲದೆ, ವೇಗವಾದ, ಹೆಚ್ಚು ಸ್ಥಿತಿಸ್ಥಾಪಕ ಮತ್ತು ವೈವಿಧ್ಯಮಯ ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರಿಗೆ ಪ್ರವೇಶಿಸಬಹುದಾದ ಉತ್ತಮ-ಗುಣಮಟ್ಟದ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ನಿಮಗೆ ಅಧಿಕಾರ ನೀಡುತ್ತದೆ.