كيفية إدارة حالة React

للتواصل بين مكونات React وتبادل الحالة (الستيت) بينها، يمكن استخدام “رفع الحالة” (lifting state up)، وهو نهج يتيح لك تحديث حالة المكونات الأبوية وتمريرها كخصائص إلى المكونات الابنة.

في مثالك، تريد تحديث حالة sidbarPushCollapsed في Header.jsx وتمريرها إلى SidebarPush.jsx. لذا، يمكنك القيام بالتالي:

1. في Header.jsx، أضف حدثًا onClick لزر sidbarPush يقوم بتغيير حالة sidbarPushCollapsed وتمريرها إلى App.jsx باستخدام دالة منشئة في App.jsx.

2. في App.jsx، قم بتحديث حالة sidbarPushCollapsed وتمريرها كخصائص إلى SidebarPush.jsx.

هناك بعض التغييرات التي يجب إجراؤها على الشيفرة لجعل هذا يعمل بشكل صحيح:

في Header.jsx، غيّر الدالة handleClick كما يلي:

jsxCopy code
handleClick() {
    this.setState({
        sidbarPushCollapsed: !this.state.sidbarPushCollapsed
    });
    this.props.onSidebarPushCollapse(!this.state.sidbarPushCollapsed);
}

في App.jsx، قم بتحديث الشيفرة لتضمين حالة sidbarPushCollapsed وتمريرها كخصائص إلى SidebarPush.jsx:

jsxCopy code
import React from 'react';
import Header from 'Header';
import classNames from "classnames";
import SidebarPush from 'SidebarPush';
import PageWrapper from 'PageWrapper';

var MainWrapper = React.createClass({
    getInitialState: function() {
        return {
            sidbarPushCollapsed: false
        };
    },
    handleSidebarPushCollapse: function(collapsed) {
        this.setState({
            sidbarPushCollapsed: collapsed
        });
    },
    render: function() {
        return (
            <div className={classNames({ 'wrapper': false, 'SidebarPush-collapsed': !this.state.sidbarPushCollapsed })}>
                <Header onSidebarPushCollapse={this.handleSidebarPushCollapse} />
                <SidebarPush sidbarPushCollapsed={this.state.sidbarPushCollapsed} />
                <PageWrapper>
                    {this.props.children}
                PageWrapper>
            div>
        );
    }
});

module.exports = MainWrapper;

وفي SidebarPush.jsx، قم بتحديث الشيفرة لاستخدام الخصائص الجديدة:

jsxCopy code
import React from 'react';
import ReactDom from 'react-dom';
import classNames from "classnames";

class SidebarPush extends React.Component {
    render() {
        return (
            <aside className="sidebarPush">
                <div className={classNames({ 'sidebar-profile': true, 'hidden': !this.props.sidbarPushCollapsed })}>
                    ....
                div>
                <nav className="sidebarNav">
                    ....
                nav>
            aside>
        );
    }
}

export default SidebarPush;

بهذه الطريقة، عندما يتم النقر على زر sidbarPush في Header.jsx، سيتم تغيير حالة sidbarPushCollapsed في App.jsx ومن ثم تمريرها إلى SidebarPush.jsx كخصائص، مما يتيح لك تحديث واجهة المستخدم بشكل مناسب.

بالطبع! في React، يمكنك أيضًا استخدام مكتبات لإدارة حالة التطبيق مثل Redux أو Context API. هذه المكتبات تجعل إدارة الحالة أكثر سهولة ويمكن أن تكون مفيدة في التطبيقات الكبيرة.

Redux، على سبيل المثال، يستخدم مفهوم الـ “مخزن” (store) الذي يحتوي على حالة التطبيق والمنطق المرتبطة بها. يمكنك استخدام أدوات Redux مثل “الإجراءات” (actions) و”المحددات” (reducers) لتحديث الحالة والتعامل مع التغييرات في التطبيق.

باستخدام Context API، يمكنك تجاوز عمق تضمين المكونات وتمرير البيانات (بما في ذلك الحالة) مباشرةً إلى المكونات التي تحتاج إليها، دون الحاجة إلى تمرير البيانات من مكون إلى آخر.

عمومًا، عند تصميم تطبيق React، يجب عليك اختيار الأداة التي تناسب احتياجات التطبيق الخاص بك وتسهل عملية إدارة الحالة وتبادل البيانات بين المكونات بشكل فعال.