اريد شرح للكود الخاص بمكتبة redux

Zen Eddin Allaham · 11 يوليو

اريد شرح للكود الخاص بمكتبة redux وماهو createStore و provider

import {createStore} from 'redux';

const reduce = (state={x : 0},action) => {
    if(action === "plus"){
        return{x: state.x +1}
    }
   else  if(action === "minutes"){
        return{x: state.x -1}
    }
    return state
}
export const StoreZen = createStore(reduce);

import React from 'react'

const Hello = () => {
  return (
    <div>
    <h1>Hello World</h1>
    </div>
  )
}

export default Hello

import { StoreZen } from "./Components/Redux";
import {Provider} from 'react-redux';
import Hello from "./Components/Hello";
function App() {
 
  return (
    <>
    <Provider store={StoreZen}>
      <Hello />
    </Provider>
  </>
  );
}

export default App;

وشكرا جزيلاً على مجهودكم

محمد_عاطف · 11 يوليو

إن Redux هي مكتبة لإدارة حالة التطبيق (state management) في تطبيقات React. والتي تقوم بحفظ حالة التطبيق بأكمله.

وcreateStore هي الدالة الأساسية في Redux لإنشاء store لتخزين حالة التطبيق.

بتاريخ 5 ساعة قال Hxfhf Ucicic:
export const StoreZen = createStore(reduce);

فهنا نقوم بإنشاء store جديد باستخدام createStore ونمرر لها دالة ال reducer والتي تتحكم في كيفية تحديث الحالة.

أما ال reducer فهو دالة تحدد كيفية تغير حالة التطبيق وذلك عند أى إجراء action تم تنفيذه.

بتاريخ 5 ساعة قال Hxfhf Ucicic:

const reduce = (state={x : 0},action) => {
    if(action === "plus"){
        return{x: state.x +1}
    }
   else  if(action === "minutes"){
        return{x: state.x -1}
    }
    return state
}

فهنا يأخذ الحالة الحالية state مع قيمة افتراضية {x: 0} إذا كانت الحالة غير محددة وبعد ذلك يأخذ ال action النوع الذي يحدد نوع التغيير المطلوب.

وعندما يكون action === "plus" يزيد قيمة x بمقدار 1. وعندما يكون action === "minutes" ينقص قيمة x بمقدار 1.

وإذا لم يتطابق مع أي شرط فإنه يعيد الحالة كما هي.

وProvider هو مكون من مكتبة react-redux الذي يجعل المتجر (store) متاح لجميع المكونات في شجرة React.

<Provider store={StoreZen}>
  <Hello />
</Provider>

فهنا نقوم بتغليف المكون Hello ب Provider ونمرر له ال store الذي أنشأناه (StoreZen).

وهكذا فالكود يقوم بإنشاء المتجر (StoreZen) باستخدام createStore ونمرر له الـ reducer وفي المكون الرئيسي (App) نستخدم Provider لجعل المتجر متاحاً للمكونات وأي مكون داخل Provider مثل Hello يمكنه الآن الوصول إلى الحالة وإرسال إجراءات لتعديلها.

اريد شرح للكود الخاص بمكتبة redux

السؤال

Zen Eddin Allaham

1 جواب على هذا السؤال

Recommended Posts

محمد_عاطف

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

كيف أتعلم؟

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية