React Hooks من الصفر الدرس الرابع (useReducer)
دائما مع react hooks جديد reactjs اليوم غادي نشوفوا hook جديدة لي هي useReducer فيلا سبقلك خدمتي ب redux غادي تكون عندك الأمور ساهلة باش تفهم مكنتيش غادي نحاول نبسط ما أمكن باش تفهم ومع ل code javascript كنظن غادي تفهم.
المغزى من useReducer هو التعامل مع الحالات لي كتكون فيهم state أكثر تعقيد و useState بوحدها مكفياش.
1- إضافة reducer
كيف قلنا يلا سبقلت خدمتي ب redux راه ساهل تفهم مكنتيش غادي نبسطوا الأمور المهم reducer هو fonction لي كاتاخذ state و action بالنسبة ل state راه باينة هي فين عندي data ديالي.
أما ل action فهي ل action لي كتنفذ أول مكيكون شي js event مثلا click أو غيرو هنا كن déclencher واحد ل action لي كنعبر عليها ب type.
ف type هو لي كيحدد نوع ل action لي غادي تنفذ فالمثال لي عندنا زدنا reducer سميناه countReducer لي كياخذ كيف قلنا state و action وكنتحقق من type ديال ل action يلا كان increment كنزيد على ل count لي هي variable غادي تكون ف state واحد كان decrement كنقص واحد.
غادي تزيد fichier جديد سميه countReducer وزيد فيه هاد الكود :
const countReducer = (state, action) => {
switch (action.type) {
case "INCREMENT":
return {
count: state.count + 1,
};
case "DECREMENT":
return {
count: state.count - 1,
};
default:
return 0;
}
};
export default countReducer;
2- إضافة ل intialState
بالنسبة ل intialState هي القيمة par défaut لي غادي ياخذ reducer كنرجع ل App.js تما كنزيد variable initialState لي عبارة عن object فيه count كتساوي صفر منبعد كنخدم ب useReducer لي كنعطيه countReducer منبعد مكنسترجعو وأيضا ل intialState لي غادي ياخذ.
وهو كيرجعلي state لي غادي يكون فيها ل variable count و dispatch لي منبعد غادي نعرفوا الدور ديالها.
دبا ممكن نعرض القيمة ديال count فل component ديالي ولي كتساوي 0.
الكود لي غادي تزيد ف App.js هو :
import React from "react";
import logo from "./logo.svg";
import "./App.css";
import countReducer from "./countReducer";
function App() {
const initialState = { count: 0 };
const [state, dispatch] = React.useReducer(countReducer, initialState);
return (
<div className="container">
<div className="row">
<div className="col-md-6 mx-auto my-5">
<p className="lead text-center badge badge-primary p-2 mr-2">
{state.count}
</p>
</div>
</div>
</div>
);
}
export default App;
3- إستعمال dispatch
بالنسبة ل dispatch هي لي غادي تمكني باش ن déclencher ل action بإستعمال type لي سبق وزدنا ف reducer.
غادي نزيد جوج ديال les boutons وحدة كتزيد ووحدة كتنقص من count منبعد فاش نضغط على + غادي نخدم ب dispatch لي قلنا ك déclencher ل action وغادي نعطيها type لي هو INCREMENT يعني كنزيد ف count و العكس فاش كنضغط على - كنفذ ل action DECREMENT وكنقص واحد من count.
هذا هو الدور ديال useReducer ممكن تجرب هادشي باش تفهم أكثر حاول تحول الكود لآلة حاسبة وتزيد لكل عملية action ديالها وتدير تعديل على ل intialState.
الكود لي غادي تزيد ف App.js هو :
import React from "react";
import logo from "./logo.svg";
import "./App.css";
import countReducer from "./countReducer";
function App() {
const initialState = { count: 0 };
const [state, dispatch] = React.useReducer(countReducer, initialState);
return (
<div className="container">
<div className="row">
<div className="col-md-6 mx-auto my-5">
<p className="lead text-center badge badge-primary p-2 mr-2">
{state.count}
</p>
<button
onClick={() => dispatch({ type: "INCREMENT" })}
className="btn btn-success mr-2"
>
+
</button>
<button
onClick={() => dispatch({ type: "DECREMENT" })}
className="btn btn-danger"
>
-
</button>
</div>
</div>
</div>
);
}
export default App;