Redux هنوز زنده است

Redux هنوز زنده  استRedux  is not  dead yet

Redux هنوز زنده است

توسط : admin
Redux یکی از پرمخاطب ترین کتابخانه ها در اکوسیستم فرانت است. قابلیت پیش بینی پذیری آن به ما امکان می دهد برنامه هایی را بنویسیم که رفتار یکسانی در پلتفرم ها (سرویس گیرنده ، بومی و سرور) داشته باشند که به راحتی قابل اشکال زدایی بوده و با هر لایه UI کار کند.

 

اما صحبت ها پیرامون Redux همیشه مثبت نیست. در واقع ، تیم Redux سال گذشته در پاسخ به انتقادات طولانی مدت علیه آن ، Redux Toolkit را منتشر کرد. علی رغم این - یا شاید به همین دلیل - تعدادی از گزینه های جدید برای مدیریت استیت به میان آمده اند و نتیجه گیری می کنند که سرانجام Redux ممکن است به پایان خود رسیده باشد.

 

شما از قبل می دانید موقعیت این پست بر اساس عنوان چیست - نه ، Redux نمرده است. در دفاع از این موضع ، موارد زیر را پوشش قرار خواهیم داد:

 

  • چرا ریداکس
  • جایگزین های ریداکس
  • باورهای غلط درباره ریداکس
  • آینده ریداکس

 

چرا باید از ریداکس استفاده کنیم؟

در توسعه نرم افزار ، جایی که مشکلی وجود دارد ، می توان اطمینان داشت که کسی به زودی راه حل ایجاد خواهد کرد. مشکلی که Redux برای حل آن ایجاد شد ، مدیریت استیت است.

در React ، ما می توانیم یک گلوبال استیت در یک مولفه سطح بالا داشته باشیم. این مولفه سطح بالا استیت را به عنوان پیش فرض به مولفه ها (یعنی مولفه های فرزند) که به داده ها نیاز دارند ، منتقل می کند. (مولفه = کامپوننت)

 

class App extends Component {
    constructor() {
        super()
        this.state = {
           friends: [
              { name:'Victor', age: 22 }, 
              { name:'Matt', age: 30 }, 
              { name:'Kate', age: 40 }
           ],
        }
    } 

    render() {
        const allFriends = this.state.friends.map(friend => friend.name)   
        return (
            <div className="tc">
                <h1 className="f1 pa">Friends</h1>
                <FriendList names ={allFriends}/>
            </div>
        );
    }   
}

 

در نمونه کد بالا ، مولفه فرزند FriendList داده allFriends را به عنوان props دریافت می کند. همچنین می تواند یک بار دیگر منتقل شود. (من می دانم که من نباید در یک جز this کلاس در سال 2021 این کار را انجام دهم ، اما قصدم از آن فقط بیان ایده است.)

 

استیت موجود در مولفه سطح بالا همیشه می تواند به روز شود. یک مولفه فرزند با دریافت تابعی از مولفه سطح بالا برای به روزرسانی ، استیت گلوبال را به روز می کند.

 

class App extends Component {
    constructor() {
        super()
        this.state = {
           friends: [
              { name:'Victor', age: 22 }, 
              { name:'Matt', age: 30 }, 
              { name:'Kate', age: 40 }
           ],
          searchField: ''
        }
    } 

        onSearchChange = (event) => {
          this.setState({searchField: event.target.value}) 
        }  

    render() {
        const filteredFriends = this.state.friends.filter(friend => {
            return friend.name.toLowerCase().includes(this.state.searchField) 
        })

        return (
            <div className="tc">
                <h1 className="f1 pa">Friends</h1>
                <SearchBox searchChange={this.onSearchChange}/>
                <FriendList names ={filteredFriends}/>
            </div>
        );
    }   
}

 

در کد نمونه فوق ، استیت searchField ما همیشه با استفاده از تابع onSearchChange به روز می شود و به مولفه SearchBox منتقل می شود.

 

کامپوننت SearchBox  نیز برای بروز رسانی و استفاده از تابع به این شکل است :

 

const SearchBox = ({searchChange}) => {
    return (
        <div> 
            <input
            className="br3 pa2 b bg-light-blue" 
            type="search" 
            placeholder="Search Robots"
            onChange={searchChange}
            />
        </div>
    );
}

 

تمام این ابزارهای تو در تو و سر و کار داشتن با کامپوننت C ، گرفتن اطلاعات از component A با بزرگتر شدن برنامه شما دردسر ساز می شود.

 

بحث های اخیر مبنی بر اینکه ما به شدت به Redux احتیاج نداریم وجود دارد ، اما واقعیت چندان روشن نیست. شما نمی دانید که به Redux احتیاج دارید تا زمانی که برنامه ای را بسازید که مدیریت استیت آن خیلی ساده نباشد.

 

در همین راستا ، پیت هانت ، عضو سابق تیم React ، نیز گفت: "شما می دانید چه زمانی به Flux احتیاج دارید. اگر مطمئن نیستید که به آن نیاز دارید ، نیازی به آن ندارید. " اگر مطمئن نیستید که به X نیاز دارید ، پس نیازی به آن ندارید.

 

بنابراین، ما باید از Redux استفاده کنیم اگر:

  • استیت ما مرتباً به روز خواهد شد. در اینجا ، ریداکس "یک منبع واحد از مخزن" را ارائه می دهد.
  • برنامه ما در بسیاری از مولفه ها استیت زیادی لازم دارد.
  • عملکرد / منطق ما برای به روزرسانی استیت پیچیده خواهد بود.

 

درست مثل هر ابزار دیگر ، Redux نیز دارای نقاط ضعف و منفی است.

 

جایگزین های ریداکس :

قبل از اینکه به گزینه های جایگزین Redux بپردازیم ، باید روشن باشد که معماری های مختلفی برای مدیریت استیت وجود دارد. همه این الگوها برای مدیریت وضعیت و جریان داده های آن با کتابخانه های React و سایر رابط کاربر استفاده شده است.

 

این سه الگو که در این مقاله جمع بندی شده است ، atomic ، proxy و flux هستند.

 

Atomic

این معماری مشابه آنچه React برای Context API و  useState  استفاده می کند ، است. این الگو به شما امکان می دهد استیت خود را به عنوان یک اتم ایجاد کنید و آنها را به اتم های کوچکتر تقسیم کنید ، برخلاف مخزن Redux که یک ظرف بزرگ برای همه استیت ها است.

 

Jotai یکی از نمونه هایی است که از این معماری استفاده می کند. بیایید یک نمونه کد را بررسی کنیم.

 

import { atom } from 'jotai'

const countAtom = atom(0)
const friendAtom = atom('Matt')
const friendsAtom = atom(['Victor', 'Matt', 'Kate'])

 

استیت فوق به قطعات کوچکتر تقسیم شده و به عنوان یک اتم رفتار می کند. استفاده از یک اتم خاص در جز component خود به این شکل خواهد بود:

 

import { useAtom } from 'jotai'

const Friend = () => {
  const [friend] = useAtom(friendAtom)
  return (
    <div>
      <p>{friend}</p>
    </div
  )
}

 

Recoil یکی دیگر از گزینه های Redux است که از معماری اتمی استفاده می کند.

 

 

Proxy

این الگو برای دسترسی به استیت از Proxyobject JavaScript استفاده می کند. پروکسی یک شی را کپسوله و رفتارهای عادی آن شی را تغییر می دهد. هدف اصلی آن ایجاد رفتار سفارشی یا تعریف مجدد عملگرهای اساسی است.

 

MobX و Valtio دو کتابخانه محبوب مدیریت استیت هستند که از این معماری استفاده می کنند. طبق گفته والتیو ، این الگو آبجکتی را که به آن منتقل می کنید به یک پروکسی خودآگاه تبدیل می کند.

 

import { proxy, useSnapshot } from 'valtio'

const bio = proxy({ age: 23, name: 'Victor' })  

 

از هرجای برنامه خود تغییراتی در وضعیت ایجاد کنید:

bio.friends = { name: 'Matt' }
bio.friends.amount = { number: 1 }

 

یا یک نسخه از داده ها را از پروکسی تهیه کنید تا برای ارائه استفاده شود:

 

function Bio() {
  const snap = useSnapshot(bio)
  return (
    <div>
      {snap.name}
      <button onClick={() => ++bio.friends.amount}>+1</button>
    </div>
  )
}

 

Flux

معماری فلاکس توسط Redux و Zustand استفاده می شود. این الگو چندین مولفه دارد که برای اداره استیت به یکدیگر متصل می شوند: actions ، dispatcher ، stores و نماهای کنترل کننده.

 

ما از زوستند به عنوان مثال استفاده خواهیم کرد. به اندازه Redux بزرگ نیست و بویلرپلیت بسیار کمتری دارد.

import create from 'zustand'

const useStore = create(set => ({
  myName: 'Victor',
  age: 23,
  friends: 0,
  increaseFriends: () => set(state => ({ friends: state.friends + 1 })),
  loseAllFriends: () => set({ friends: 0 })
}))

 

زوستند از store ما به عنوان hook استفاده می کند. کلمه کلیدی set استیت را درون  useStore ترکیب می کند.

استفاده از استیت در مولفه ما فقط آسان است.

function BearCounter() {
  const bears = useStore(state => state.bears)
  return <h1>{bears} around here ...</h1>
}

function Bio() {
  const name = useStore(state => state.myName)
  const increaseFriends = useStore(state => state.increaseFriends)
  return (
    <h1>I am {name}</h1>
    <button onClick={increaseFriends}>Increase My Friends</button>
  )
}

 

بر اساس معماری آنها ، گزینه های ذکر شده در بالا - Jotai ، Recoil ، Zustand و Valtio - روشهای مختلفی برای مدیریت استیت دارند و از بسیاری جهات ، آنها به عنوان پاسخی به الگوی مورد استفاده Redux بوجود می آیند. بسته به نیاز شما ، برنامه شما می تواند از مزایای استفاده از رویکرد اتمی (Jotai یا Recoil) یا حتی رویکرد flux با Zustand به جای Redux به لطف مینیمال API بهره مند شود.

 

باورهای غلط درباره Redux

Redux دارای بویلرپلیت غیر ضروری است :

Redux ، نه تنها به دلیل کد "biolerplate" بلکه به دلیل منحنی یادگیری ، مورد توجه بسیاری از جامعه JavaScript قرار گرفته است. بسیاری از توسعه دهندگان این واقعیت را از دست می دهند که Redux از الگوی طراحی استفاده می کند که به قطعات کد زیادی نیاز دارد: معماری flux ، که از اجزای جداگانه آن برای مدیریت استیت استفاده می کند.

 

Flux از اکشن کامپوننت  (متد) برای انتقال داده ها به dispatcher استفاده می کند. توزیع کننده اکشن ها را دریافت کرده و تا پایان کالبک وضعیت استیت را باز نگه داشته و سپس اقدام به تغییر وضعیت استیت کرده و مقدار نهایی به استیت ارسال میکند. این خاصیت همان چیزی است که ما آن را تحت عنوان payload می شناسیم.

 

سپس ، store به عنوان ظرف استیت و منطق ما عمل می کند که به کالبک ها پیوند داده می شود. تمام این عملیات ها به دیگ بخار زیادی احتیاج دارند. حتی کسانی که به دلیل مقدار زیاد دیگ بخار از Redux سرگرم می شوند ، باید این معماری را تحسین کنند.

 

ریداکس پیچیده است :

خود دن آبراموف این واقعیت را مخفی نکرده است که شما احتمالاً برای پروژه خود به Redux نیازی ندارید. من می گویم شما فقط زمانی به Redux نیاز دارید که برنامه شما مقیاس بندی شده و پیچیده شود. یک برنامه کوچکتر یا یک پروژه شخصی به احتمال زیاد با Context API پیاده می شود.

 

صحبت از Context API ، هنگامی که مجبور هستید داده های گلوبال استیت را به اشتراک بگذارید ، به خوبی کار می کند - نیازی به انتقال داده ها به عنوان پراپس برای هر مولفه نیست. در واقع ، گاهی اوقات این کافی است و یک راه حل پیچیده مدیریت استیت مانند Redux بیش از حد مجاز است. ما باید آگاه باشیم که Context یک راه حل مدیریت استیت نیست ، بلکه راهی آسان تر برای انتقال داده ها به یک مولفه تو در تو است.

 

به همین ترتیب ، برخی از افراد ادعا کرده اند که Redux مرده است زیرا React’s Hooks API کاملاً قادر به مدیریت استیت در حال حاضر است ، به ویژه هنگامی که همراه با Context API استفاده شود. این حرف به طور کامل نادرست نیست ، اما بسیاری از این واکنشها ناشی از انتقال تو در توی props است. اگر نمی خواهید درگیر این مسایل باشید ، Redux نباید انتخاب شما باشد.

 

حرف من این است که بسیاری از انتقادات علیه ریداکس نتیجه تصورات غلطی از این دست است. بسیاری از توسعه دهندگان از Redux ضعیف استفاده می کنند یا در صورت لزوم از آن استفاده می کنند. بهتر است قبل از انتخاب Redux پروژه خود را درک کنید.

 

آینده ریداکس

از بسیاری جهات ، اکنون آینده متعلق به Redux Toolkit (RTK) است. این مجموعه ابزار به طور پیش فرض با ارائه کد ساده store ، reducerها و action ها، به وفور کد دیگ بخار Redux کمک می کند. همچنین شامل تمام بسته هایی است که معمولاً در کنار Redux استفاده می شوند ، بنابراین مجبور نیستیم همه آنها را به صورت جداگانه نصب کنیم - بسته هایی مانند reselect ، Redux Thunk ، Immer و موارد دیگر.

 

نصب این جعبه ابزار آسان است:

# In your already existing React application, run either of these commands

# npm
npm install @reduxjs/toolkit

# Yarn
yarn add @reduxjs/toolkit

 

API هایی که RTK ارائه می دهد عبارتند از ()createStore()، createReducer()، createAction و ()createSlice که به ساده سازی کد دیگ بخار Redux کمک می کند. این یک پیشرفت در توسعه Redux است.

 

()createSlice ، ریدوسرها و اکشن های شما را برایتان ایجاد می کند و آنها را نیز متصل می کند. React Redux همچنین دارای API های useDispatch و useSelector است ، به این معنی که شما می توانید به dispatch اکشن ها متصل شوید و بدون نیاز به استفاده از HOC  به store دسترسی داشته باشید.

 

به نظر من ، ریداکس در سال های آینده هرگز به جایی نمی رود ، زیرا بسیار مناسب React است. هیچ اتکا و وابستگی به هیچ یک از این کتابخانه ها وجود ندارد. در حالی که Redux استیت را کنترل می کند ، از React در نمای برنامه استفاده می شود.

 

Hooks و Context هنوز به اندازه Redux از نظر مدیریت استیت قدرت ندارند. در حقیقت ، به وضوح توضیح داده شده است که آنها یک راه حل واقعی برای مدیریت استیت نیستند. آنها فقط ارائه دهندگان استیت هستند - شما هنوز هم باید منطق اجزا را ارائه دهید.

 

Redux از معماری pub/sub استفاده می کند: مولفه شما در تغییرات استیت شریک است ، و مولفه ها همچنین می تواند تغییرات استیت را با استفاده از dispatch منتشر کند. ممکن است در این سناریو سعی کنید از Context API استفاده کنید ، اما در پایان ممکن است مجبور شوید از Redux استفاده کنید. داستانهای دست اول در مورد چگونگی استفاده از context برای مدیریت استیت می تواند عملکرد برنامه را از بین ببرد.

 

نکته این است که Redux به شما امکاناتی  بیش از مدیریت استیت می دهد. از الگوی طراحی گرفته تا نگهداری آسان و مقیاس پذیری همزمان با رشد برنامه ، می توانید منطق مدیریت استیت خود را از لایه UI جدا کنید. Redux هنوز هم مفید است ، هنوز آینده دارد و قطعاً نمرده است.

 

برچسب ها

نظرات :

در عرض چند دقیقه برای ایجاد حساب

کاربری خود اقدام کنید


اکنون حساب کاربری خود را ایجاد کنید!


ایجاد حساب کاربری

با ثبت نام در نیلوتک از آخرین بروز رسانی های آموزش ها و مقالات سایت مطلع شوید