شرح React Redux Toolkit لبناء حاسبة السعر والضريبة خطوة بخطوة
تعد مكتبة React Redux Toolkit من أفضل الأدوات الحديثة لإدارة الحالة داخل تطبيقات React، خصوصًا عندما يكبر المشروع وتصبح البيانات مشتركة بين أكثر من مكون. بدلًا من تمرير البيانات يدويًا بين المكونات، يمكننا استخدام Redux Toolkit لإنشاء Store مركزي يحتوي على البيانات ويتم تحديثه بطريقة منظمة وسهلة.
في هذا المقال سنشرح كيفية استخدام React Redux Toolkit من خلال مثال عملي بسيط: مربع لإدخال السعر، ومربع لإدخال قيمة الضريبة، ثم إظهار الإجمالي النهائي تلقائيًا.
توصي وثائق Redux الرسمية باستخدام Redux Toolkit لأنه يقلل الكود المتكرر ويوفر configureStore وcreateSlice بطريقة أسهل من Redux التقليدي.
ما هو Redux Toolkit؟
الميزة الأساسية في React Redux Toolkit أنه يجعل إدارة الحالة أكثر وضوحًا، ويقلل الحاجة لكتابة action types و reducers بشكل منفصل كما كان يحدث في Redux القديم.
لماذا نستخدم React Redux Toolkit؟
من أهم مميزاته:
– تقليل الكود المتكرر – تنظيم الحالة داخل slices – دعم Redux DevTools تلقائيًا – سهولة قراءة وتحديث البيانات – مناسب للمشاريع الصغيرة والكبيرة
تثبيت Redux Toolkit داخل React
npm install @reduxjs/toolkit react-redux
الحزمة الأولى توفر أدوات Redux Toolkit، أما react-redux فهي المسؤولة عن ربط Redux بتطبيق React.
هيكل الملفات المقترح
src/
app/
store.ts
features/
tax/
taxSlice.ts
components/
TaxCalculator.tsx
main.tsx
إنشاء Slice لحساب السعر والضريبة
import { createSlice, PayloadAction } from "@reduxjs/toolkit";
type TaxState = {
price: number;
tax: number;
};
const initialState: TaxState = {
price: 0,
tax: 0,
};
const taxSlice = createSlice({
name: "tax",
initialState,
reducers: {
setPrice: (state, action: PayloadAction<number>) => {
state.price = action.payload;
},
setTax: (state, action: PayloadAction<number>) => {
state.tax = action.payload;
},
},
});
export const { setPrice, setTax } = taxSlice.actions;
export default taxSlice.reducer;
في هذا الملف أنشأنا Slice باسم tax، يحتوي على price و tax. عند تغيير السعر نستدعي setPrice، وعند تغيير الضريبة نستدعي setTax.
ورغم أننا نكتب state.price = action.payload، إلا أن Redux Toolkit يتعامل داخليًا مع التحديثات بشكل آمن باستخدام Immer.
إنشاء Redux Store
import { configureStore } from "@reduxjs/toolkit";
import taxReducer from "../features/tax/taxSlice";
export const store = configureStore({
reducer: {
tax: taxReducer,
},
});
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;
هنا استخدمنا configureStore لإنشاء Store وإضافة taxReducer داخله. هذه الطريقة هي الأسهل والأفضل في Redux Toolkit.
ربط Redux Store مع تطبيق React
import React from "react";
import ReactDOM from "react-dom/client";
import { Provider } from "react-redux";
import { store } from "./app/store";
import TaxCalculator from "./components/TaxCalculator";
ReactDOM.createRoot(document.getElementById("root")!).render(
<React.StrictMode>
<Provider store={store}>
<TaxCalculator />
</Provider>
</React.StrictMode>
);
مكون Provider يجعل جميع مكونات React قادرة على الوصول إلى بيانات Redux Store.
إنشاء مكون حساب السعر والضريبة
import { useDispatch, useSelector } from "react-redux";
import type { RootState, AppDispatch } from "../app/store";
import { setPrice, setTax } from "../features/tax/taxSlice";
function TaxCalculator() {
const dispatch = useDispatch<AppDispatch>();
const price = useSelector((state: RootState) => state.tax.price);
const tax = useSelector((state: RootState) => state.tax.tax);
const total = price + (price * tax) / 100;
return (
<div style={{ maxWidth: "400px", margin: "40px auto", padding: "20px", border: "1px solid #ddd" }}>
<h2>Tax Calculator</h2>
<label>Price</label>
<input
type="number"
value={price}
onChange={(e) => dispatch(setPrice(Number(e.target.value)))}
placeholder="Enter price"
style={{ display: "block", width: "100%", marginBottom: "15px" }}
/>
<label>Tax %</label>
<input
type="number"
value={tax}
onChange={(e) => dispatch(setTax(Number(e.target.value)))}
placeholder="Enter tax"
style={{ display: "block", width: "100%", marginBottom: "15px" }}
/>
<h3>Total: {total.toFixed(2)}</h3>
</div>
);
}
export default TaxCalculator;
في هذا المكون استخدمنا useSelector لقراءة السعر والضريبة من Redux Store، واستخدمنا useDispatch لإرسال أوامر التحديث عند الكتابة داخل الحقول.
كيف يتم حساب الإجمالي؟
const total = price + (price * tax) / 100;
إذا كان السعر 100 والضريبة 15%، فسيكون الحساب كالتالي:
100 + (100 * 15) / 100 = 115
وبذلك يظهر الإجمالي النهائي مباشرة عند تغيير السعر أو الضريبة.
شرح useSelector و useDispatch
تستخدم لقراءة قيمة من Redux Store.
مثال:
const price = useSelector((state: RootState) => state.tax.price);
useDispatch
تستخدم لإرسال Action لتحديث الحالة.
مثال:
dispatch(setPrice(200));
الكود الكامل للمثال
// taxSlice.ts
import { createSlice, PayloadAction } from "@reduxjs/toolkit";
type TaxState = {
price: number;
tax: number;
};
const initialState: TaxState = {
price: 0,
tax: 0,
};
const taxSlice = createSlice({
name: "tax",
initialState,
reducers: {
setPrice: (state, action: PayloadAction<number>) => {
state.price = action.payload;
},
setTax: (state, action: PayloadAction<number>) => {
state.tax = action.payload;
},
},
});
export const { setPrice, setTax } = taxSlice.actions;
export default taxSlice.reducer;
// store.ts
import { configureStore } from "@reduxjs/toolkit";
import taxReducer from "../features/tax/taxSlice";
export const store = configureStore({
reducer: {
tax: taxReducer,
},
});
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;
// TaxCalculator.tsx
import { useDispatch, useSelector } from "react-redux";
import type { RootState, AppDispatch } from "../app/store";
import { setPrice, setTax } from "../features/tax/taxSlice";
function TaxCalculator() {
const dispatch = useDispatch<AppDispatch>();
const price = useSelector((state: RootState) => state.tax.price);
const tax = useSelector((state: RootState) => state.tax.tax);
const total = price + (price * tax) / 100;
return (
<div>
<h2>Tax Calculator</h2>
<input
type="number"
value={price}
onChange={(e) => dispatch(setPrice(Number(e.target.value)))}
placeholder="Enter price"
/>
<input
type="number"
value={tax}
onChange={(e) => dispatch(setTax(Number(e.target.value)))}
placeholder="Enter tax"
/>
<h3>Total: {total.toFixed(2)}</h3>
</div>
);
}
export default TaxCalculator;
أفضل استخدامات React Redux Toolkit
– تطبيقات المتاجر الإلكترونية – إدارة السلة والطلبات – أنظمة الفواتير – لوحات التحكم – تطبيقات الحسابات والضرائب – التطبيقات التي تحتوي على بيانات مشتركة بين صفحات كثيرة
نصائح مهمة عند استخدام Redux Toolkit
– لا تستخدم Redux لكل قيمة صغيرة داخل التطبيق – استخدمه للحالة المشتركة بين أكثر من مكون – قسم الحالة إلى slices واضحة – استخدم TypeScript لتقليل الأخطاء – اجعل العمليات الحسابية واضحة وسهلة القراءة
رابط المقال
https://redux-toolkit.js.org/api/configureStore/
الخلاصة
في هذا المقال تعلمنا كيفية إنشاء Store، وكيفية إنشاء Slice باستخدام createSlice، وكيفية قراءة البيانات باستخدام useSelector، وتحديثها باستخدام useDispatch.
كما طبقنا مثالًا عمليًا لحساب السعر والضريبة وإظهار الإجمالي النهائي، وهو مثال بسيط لكنه يوضح الفكرة الأساسية لاستخدام Redux Toolkit في المشاريع الحقيقية.
إذا كنت ترغب في تطوير تطبيقات React أكبر وأكثر تنظيمًا، فإن تعلم React Redux Toolkit خطوة مهمة جدًا في رحلتك كمطور واجهات أمامية.
مزيد من المقالات : كيفيه تحويل اي تطبيق الي EXE في فلاتر لتثبيته على الويندوز
