React Hooks من الصفر الدرس الرابع (useReducer)

منذ 3 سنوات imadbelasri Reactjs
RS

دائما مع 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;