0

مجله آموزشی

کمپین آموزشی بی لرن > مجله آموزشی > مطالب طراحی سایت > مطالب جاوا اسکریپت > Redux چیست؟

Redux چیست؟

29 آبان 1399
ارسال شده توسط
مطالب جاوا اسکریپت ، مطالب طراحی سایت
4.04k بازدید
مقاله Redux | بی لرن
شغل:طراحی وب
درآمد:۱۳۰ هزار دلار سالانه
مکان:هر کشوری دوست داری
مسیر: ۷ دوره آموزشی
منتور ۲ :جلسه آنلاین با استاد
منتور ۱ : کافه گپ و گفت
بزن بریم

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

فریمورک Redux چیست؟

 

Redux چیست؟ | بی لرن

 

ریداکس یکی از کتابخانه های جاواسکریپت می باشد که در زمینه ساخت رابط کاربری اپلیکیشن ‌ها و صفحات وب مورد استفاده قرار می گیرد. فراموش نکنید که redux بر پایه معماری flux طراحی شده است و برای بهتر کار کردن با این فریمورک بهتر است که با معماری flux آشنا شوید. Redux دارای حالات (states) می باشد که این حالت باعث می شود، بتوانید برنامه ‌های جاوا اسکریپت را مدیریت نمایید. ریداکس یک الگو بهتر و بهینه‌ تر را برای مدیریت برنامه ها در اختیار طراحان قرار می دهد. Redux در سال 2015 به طراحان معرفی شده است و بیشتر به عنوان یک مکمل در کنار کتابخانه‌ ها مورد استفاده قرار می گیرد. این کتابخانه دارای 2 کیلو بایت حجم می باشد و علاوه بر آن این کتابخانه دارای قابلیت متن باز نیز می باشد. 

نوشتن کامپوننت statefull در React

 

نوشتن کامپوننت statefull در React | بی لرن

 

 

معماری flux 

 

معماری flux  | بی لرن

 

flux یک نمونه بازسازی شده از ایده های قبلی mvc ،‌mvvm و twoway data binding به حساب می آید که باعث معرفی یا بیان یک جریان جدید در فرانت اند می شود که به این جریان undirectional data flow گفته می شود. این جریان دارای سه بخش اصلی stores ,dispatcher و action می باشد.

روش کار flux 

  • در ابتدا مجموعه‌ ای از store‌ها به action‌ها منتقل می شود.
  • بعد از اینکه یک action در UI اتفاق میافتد به dispatcher اطلاع داده می ‌شود.
  • dispatcher به store‌های منتقل شده اطلاع رسانی می‌ کند تا آن‌ ها بروز رسانی شوند.
  • state مربوط به هر store‌ها با توجه به action بروز رسانی می ‌شود.
  • در انتها UI هم با توجه به state‌های جدید بروز رسانی می شود.

 

بنر مقاله React | بی لرن

 

 state چیست؟

 

state چیست؟ | بی لرن

 

برنامه ‌های کامپیوتری برای ذخیره سازی اطلاعات خود از متغییر ها یا حافظه جانبی استفاده می کنند. هر کدام از متغیر ها مقداری از فضا در حافظه کامپیوتر (RAM) را اشغال می کنند. هر چقدر بیشتر State را بشناسید، بهتر می توانید با Redux کار کنید.

 This code does the same thing as the code above //

} : case TOGGLE_MESSAGE_VISIBILITY

} return 

} , Object.assign({}, state

, messageVisibility: !state.messageVisibility

{ (

{

{

 

Store ریداکس

 

Store ریداکس | بی لرن

 

زمانی که از ریداکس استفاده می کنید، store شروع به نگه‌ داری از حالت اپلیکیشن می کند. فراموش نکنید که هر اپلیکیشن ریداکس تنها دارای یک 1 store منفرد می باشد. store امکان دسترسی به حالت اپلیکیشن را از هر کامپوننت را فراهم می کند. نحوه اتصال به store ریداکس بسیار آسان می باشد. به فایل App.js که در کد زیر برای شما نمایش داده شده است توجه نمایید.

;’import React, { Component } from ‘react

;’import { Provider } from ‘react-redux

;’import { createStore } from ‘redux

;’import Toggle from ‘./components/Toggle

;’import rootReducer from ‘./rootReducer

) const store = createStore

rootReducer

; (

}class App extends Component 

}() render

) return 

<{Provider store={store>

<Toggle/>

<Provider/>

;(

{

{

;export default App

 

روش کار redux 

redux تنها از یک store استفاده می کند که به راحتی می تواند action‌ ها را به وسیله store مدیریت نماید. این عمل باعث می شود که نیازی به dispatcher نداشته باشید. روش کار redux به صورت زیر می باشد.

  • زمانی که action در UI ایجاد می شود، reducer براساس action و state جاری یک state جدید ایجاد می کند و آن را store ذخیره می کند.
  • پس از اینکه یک action در یک state تغییر ایجاد کرد و state جدید توسط reducer ایجاد شد،store به طراحان اطلاع رسانی می ‌کند.

 

قسمت های redux

 

قسمت های redux | بی لرن

 

توابع ریداکس

توابع در redux به 2 دسته توابع خالص و ناخالص تقسیم می شوند که در زیر به طور کامل به آن‌ها می پردازیم.

توابع خالص

تعدادی آرگومان را دریافت می کند و بر اساس آن‌ها، مقداری را بر می ‌گرداند.

Pure // 

 } < = (const add = (a, b 

; return a + b

{

 

توابع ناخالص

تغییراتی را در متغیرهای درون میدان دید خود ایجاد می کنند و یا یک سری اثرات جانبی (side effects) مانند تعامل با دنیای خارج به حساب می آیند.

 Impure //

; const b

 } <=(const add = (a

; return a + b

{

 

تبدیل توابع خالص به توابع ناخالص

برای تبدیل توابع خالص به توابع ناخالص، باید از روش فراخوانی سرویس‌ های backend در برنامه استفاده نمایید.

Impure // 

<=(const add = (a, b

 } <=(Api.post(‘/add’, { a, b }, (response

 .Do something //

; {(

; {

 

اکشن ‌های Redux

اکشن ‌ها در ریداکس به عنوان ظرفیت ترابری اطلاعات به store ارسال می شوند، بیان شده اند. به طور کلی اکشن ها یک شیء جاوا اسکریپت ساده به حساب می آیند. به مثال زیر توجه نمایید.

 We’ll talk about this line of code a little later //

;’import { TOGGLE_MESSAGE_VISIBILITY } from ‘./types

(A basic Redux action (it’s just a Javascript object //

{ type: TOGGLE_MESSAGE_VISIBILITY }

 

کاهنده ‌ریداکس

State در اپلیکیشن ‌های Redux به صورت شیء منفرد ذخیره می گردد. زمانی که اکشن به store ارسال می ‌شود، کاهنده‌ ها روش تغییر کردن حالت در پاسخ به آن اکشن را مدیریت می کند. در کد نویسی زیر به فایل toggle.js می پردازیم که در کاهنده ‌ها به صورت تو در تو نوشته می شود.

Now we will get to why this pattern prevents bugs // 

; ‘import { TOGGLE_MESSAGE_VISIBILITY } from ‘../actions/types

 Here we define the initial state of our application //

Initially, our message is not visible //

 = const initialState 

,messageVisibility: false

{

This is our REDUCER // 

} (export default function (state = initialState, action

here we pluck off action.type and store it in the const type//

using some es6 destructuring // 

; const { type } = action

} (switch (type) 

} : case TOGGLE_MESSAGE_VISIBILITY 

} return

, …state

, messageVisibility: !state.messageVisibility

{

{

} : default

return state

{

{

{

 

مبانی ریداکس

به وسیله کد زیر یک کامپوننت ساخته می شود که به شکل یک دکمه بازگشت به کاربر نمایش داده می شود. کاربر با کلیک بر روی آن می تواند مقداری را مشاهده کند. علاوه بر آن می توانید به به بررسی فایل‌های rootReducer.js و App.js بپردازید.

redux-example

node_modules

public

srcactions

actions.js

types.js

components

Toggle.js

reducers

toggle.js

App.js

index.js

rootReducer.js

serviceWorker.js

gitignore.

package-json.lock

package.json

README.md

yarn.lock

 

تنظیمات پایه در Redux

می توانید کد بالا را به وسیله تنظیمات ریداکس به صورت زیر بنویسید.

 this is our actions > actions.js file //

} () export function toggleMe

} return 

, “type: “TOGGLE_MESSAGE_VISIBILITY

{

; {

this is our reducers > toggle.js file //

} = const initialState 

, messageVisibility: false

{

} (export default function (state = initialState, action

; const { type } = action

Notice the TYPO in “TOGLE_MESSAGE_VISIBILITY” instead of “TOGGLE_MESSAGE_VISIBILITY” below // 

} (switch (type

} : “case “TOGLE_MESSAGE_VISIBILITY

} return 

, …state

, messageVisibility: !state.messageVisibility

{

{

} : default

return state

{

{

{

 

فریمورک ریداکس چه کاربردی دارد؟

 

کاربرد فریم ورک ریداکس | بی لرن

 

کاربرد هایی که تیم توسعه Redux بیان کرده اند به صورت زیر می باشند.

  • برطرف کردن مشکلات به وجود آمده در پروژه
  • مدیریت پروژه و حالات برنامه
  • پیاده سازی کامل برنامه
  • استفاده از مدیریت States برای مشخص کردن محل و نحوه ذخیره سازی پروژه های پیچیده
  • اطلاعاتی که کاربر مشاهده می‌ کند ( data )
  • اطلاعاتی که از کاربر دریافت می ‌کنیم
  • URL هایی که به کاربر نمایش می‌ دهیم
  • آیتم هایی که داخل صفحه نمایش داده شده اند
  • خطاهایی که اپلیکشن می ‌دهد
  • در اختیار گذاشتن امکاناتی همچون Debugging ، action Replying و … به طراحان
  • راحت کردن خطا‌یابی (Debug) برنامه

 

دلیل استفاده از ریداکس

دلایل استفاده از Redux به صورت زیر می باشند.

  • نظارت و مدیریت رفتار برنامه خود در محیط‌ های مختلف 
  • اشکال‌ زدایی در حین اجرا به شکل کدهای Live و پویا 
  • امکان مدیریت و سازمان‌ دهی دقیق برنامه
  • تغییر داده ‌های خود با یک برنامه ‌ریزی دقیق درطول زمان
  • استفاده از ریداکس در توسعه بک اند و سمت سرور
  • یک کتابخانه کوچک با حجم کم و نصب آسان می باشد
  • سریع و کاربردی بودن
  • داشتن نمونه کدهای آماده
  • پشتیبانی و سازگاری با معماری قدرتمند MVC
  • ایجاد و مدیریت ساده و سریع داده ‌های با ترکیب React و Angular 

 

سه اصل مهم در redux

 

سه اصل مهم در redux | بی لرن

 

ریداکس دارای 3 اصل مهم می باشد که در این قسمت به آن ها می پردازیم.

Single source of truth

در این اصل، تمام state ها داخل یک object کامپوزیشن (درختی) به نام store ذخیره می ‌شوند.

State is read-only

شما به وسیله این اصل می توانید، یک action را به dispatch تبدیل نمایید تا state تغییر کند. دلیل انجام این کار این است که داده ‌ها mutate نشوند و باید برای این کار از reducer استفاده نمایید.

Changes are made with pure functions

به reducer‌ ها، pure function نیز گفته می شود که پس از دریافت state فعلی و یک action، بدون تغییر دادن state فعلی یک state جدید ایجاد می کند.

 

Redux با کدام زبان ‌ها و فریمورک ‌ها سازگار می باشد؟

فریمورک سازگار

  • فریمورک‌ React
  • فریمورک React Native
  • فریمورک ngular
  • فریمورک Angular2
  • فریمورک  Vue
  • فریمورک Mithril
  • و …

زبان‌های سازگار

  • زبان HTML
  • زبان جاوااسکریپت
  • زبان css
  • زبان وردپرس

 

Redux چه کمکی به طراح می ‌کند؟

ریداکس به دلیل امکانات و قابلیت های زیر، کمک بسیاری به طراحان می کند.

  • بر طرف کردن مشکل به وجود آمده در ابتدای کار
  • دادن state مورد نیاز به هر کامپوننت
  • نگهداری state ها درون یک مکان
  • بدست آوردن و مدیریت کردن State بیرون از React

 

زمان وارد کردن ریداکس درون برنامه‌

 

زمان وارد کردن ریداکس | بی لرن

 

زمان مشخصی برای وارد کردن Redux در برنامه ها وجود ندارد. زمانی که احساس کردید که برنامه شما بزرگ شده است و نیاز به مدیریت State های خود دارید می توانید از ریداکس را وارد برنامه خود کنید و از آن استفاده نمایید. فراموش نکنید که Redux برای برنامه های کوچک طراحی نشده است و به هیچ عنوان از آن در برنامه های کوچک استفاده نکنید. 

 

باید های Redux

می توانیم چند مورد از باید های استفاده از ریداکس را به صورت لیست زیر بیان کنیم.

  • هنگام تغییر مقدار معقولی از داده ها در طول زمان
  • زمانی که فقط یک منبع حقیقی برای حالت (کشور) خود دارید
  • هنگامی که متوجه شده اید که نگه داشتن تمام حالات شما در یک اجزای سطح بالا کافی نمی باشد

 

مزایا و معایب ریداکس

 

مزایا و معایب ریداکس | بی لرن

 

مزایای فریمورک Redux

  • reducer functions (کاهش فانکشن های برنامه)
  • قابل اطمینان
  • کم حجم
  • قابل ترکیب با React و Angular

معایب فریمورک Redux

  • هیچی !

 

سخن پایانی

در شناخت فریمورک ریداکس، موضوعاتی همچون Redux چیست ، معماری flux، حافظه State، Stor، روش کار Redux، قسمت های فریمورک ریداکس، کاربرد Redux و … وجود دارند. شما با شناخت کامل این موضوعات می توانید برنامه ها و کد های خود را مدیریت نمایید. شما به وسیله این مقاله جامع و روان می توانید با فریمورک ریداکس آشنا شوید و از آن استفاده کنید.

برای دریافت پاسخ سوالات خود و بهره مند شدن از تجربه اساتید خبره و دیگر دوستانتان در کمپین آموزشی بی لرن می توانید سوالات خود را در کافه گپ و گفت مطرح نمایید و در سریعترین زمان، پاسخ سوال خود را دریافت نمایید. همچنین می توانید با عضویت در کمپین آموزشی بی لرن، از دوره های آموزشی رایگان و کاربردی در زمینه های مختلف به صورت تخصصی و حرفه ای بهره مند شوید. با توجه به مسیر یادگیری در زمینه های مختلف می توانید برای شروع طراحی سایت و برنامه نویسی از آموزش html و css بهره مند شوید.
شغل:طراحی وب
درآمد:۱۳۰ هزار دلار سالانه
مکان:هر کشوری دوست داری
مسیر: ۷ دوره آموزشی
منتور ۲ :جلسه آنلاین با استاد
منتور ۱ : کافه گپ و گفت
بزن بریم
اشتراک گذاری:
برچسب ها:

مطالب زیر را حتما مطالعه کنید

دیدگاهتان را بنویسید

شغل:طراحی وب
درآمد:۱۳۰ هزار دلار سالانه
مکان:هر کشوری دوست داری
مسیر: ۷ دوره آموزشی
منتور ۲ :جلسه آنلاین با استاد
منتور ۱ : کافه گپ و گفت
بزن بریم