آموزش مفاهیم Redux

تومان

تعداد دانشجوها: 845

 

بعد از ثبت نام در دوره، برای دانلود ویدیوها وارد قسمت “حساب کاربری” شوید.

توضیحات

Redux یک کتابخانه متن باز است که با زبان برنامه نویسی جاوااسکریپت توسعه داده شده. به کمک این کتابخانه قدرتمند می‌توانیم Stateهای نرم افزار را به سادگی مدیریت کنیم. Redux بیشتر در کنار ReactJS استفاده می‌شود. اما انعطاف و معماری این تکنولوژی باعث شده تا بتوانیم برای سایر کتابخانه‌های UI (رابط کاربری) نیز از آن استفاده کنیم.

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

در طول این دوره تلاش کرده‌ایم تا با یک رویکرد ساده، مفاهیم Redux را توضیح دهیم. پیش نیاز این دوره، دوره آموزشی ReactJS است.

استارتاپ رایچت در طول این دوره همراه ما بودند و با حمایت مادی خود کمک کردند تا این دوره به صورت رایگان در اختیار شما دانشجویان عزیز قرار گیرد.

 

سرفصل‌های دوره

معرفی دوره. بررسی کتابخانه Redux و کاربردهای آن

۱. پیاده سازی مثال شمارنده با Stateهای ReactJS – قسمت اول

۲. پیاده سازی مثال شمارنده با Stateهای ReactJS – قسمت دوم

۳. بررسی مفاهیم ریداکس – Actions

۴. بررسی مفاهیم ریداکس – Reducers
۵. بررسی مفاهیم ریداکس – Store – مشاهده ویدیو

۶. پیاده سازی مثال شمارنده با ریداکس – توسعه کامپوننت شمارنده

۷. پیاده سازی مثال شمارنده با ریداکس – توسعه تابع Reducer – مشاهده ویدیو

۸. پیاده سازی مثال شمارنده با ریداکس –  اضافه کردن Store

۹. پیاده سازی مثال شمارنده با ریداکس – فراخوانی Actions

 

24 پاسخ به “آموزش مفاهیم Redux”

  1. dehnavi گفت:

    تشکر فراوان جناب صدری بسیار لطف کردین

  2. سعیدی گفت:

    همه آموزش هاتون عالیه، ادامه بدید

  3. behzad گفت:

    خسته نباشی مهندس. مثل همیشه خیلی خوب بود. هنوز ادامه داره یا همین ۱۰ قسمت بود ؟

  4. sih گفت:

    خدا خیرتون بده استاد.

  5. روژین شریفی گفت:

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

  6. آرش گفت:

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

  7. saber گفت:

    سلام استاد صدری ممنونم از آموزششاتون همشونو تا حالا دیدم
    اما ممنون میشم یه تمرینی بهم بدید یه پروژه ای چیزی تا خودمو به چالش بکشم ببینم چی بلدم!؟

  8. alizare121 گفت:

    سلام استاد وقتتون بخیر
    دوره بعدی redux ، دوره پیشرفته کی شروع میشه؟

  9. Pouri0121 گفت:

    لطفا آموزش React Hooks قرار بدین – منبع فارسی زیاد نداریم -ممنون میشم -مرسی استاد

  10. mohammadmaso گفت:

    آقا خیلی ممنون از آموزشتون ، خسته هم نباشید، واقعا مفهمومی و عالی

  11. سجاد گفت:

    سلام، خیلی ممنون عالی بود و ساده توضیح داده بودید.
    فقط من برنامه ام رو به دو بخش تقسیم کردم. ینی route روت شمارنده ای که با react نوشتیم رو نمایش میده و یک Route جداگانه برای شمارنده با redux نوشتم.
    شما در آخرین قسمت فیلم ها داخل فایل index.js فقط همون یک component رو رندر کردین.
    من ریداکس رو داخل فایل app.js ایمپورت کردم و prop ها از طریق Route رو پاس دادم به component ی که با ریداکس نوشتم. توی redux dev tools شمارنده درست کار میکنه اما تغییرات توی صفحه اعمال نمیشه… در این حالت چطور باید صفحه رو با هر بار اجرا شدن توابع به روز کنم؟

  12. سجاد گفت:

    App.js
    import React, { Component } from “react”;
    import { BrowserRouter as Router, Route, Switch } from “react-router-dom”;
    import { Link } from “react-router-dom”;
    import bootsrapCss from “bootstrap/dist/css/bootstrap.min.css”;
    import CounterReact from “./components/Counter-React”;
    import CounterRedux from “./components/Counter-Redux”;
    import NotFound from “./components/NotFound”;

    class App extends Component {
    render() {
    return (

    Home
    Redux Counter

    );
    }
    }
    export default App;
    .
    .
    .
    Redux-Counter.js ( Component ) :
    import React, { Component } from “react”;
    import { createStore } from “redux”;
    import { connect } from “react-redux”;
    import counter from “../reducers”;

    const store = createStore(
    counter,
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
    );
    class Counter extends Component {
    render() {
    const value = store.getState();
    const onIncrement = () => {
    store.dispatch({ type: “INCREMENT” });
    console.log(value);
    };
    const onDecrement = () => {
    store.dispatch({ type: “DECREMENT” });
    console.log(value);
    };
    return (

    Redux Method:
    Count: {value}

    Incerement

    Decrement

    );
    }
    }
    export default Counter;

    • این رو به شکل‌های مختلف می‌شه نوشت. وقتی Prop رو پاس دادین به کامپوننت دیگه و کار نکرده، احتمال زیاد مشکل توی ایمپورت باشه. اگر همه اینها داخل index.js باشن هم ارور دارین؟

  13. سجاد گفت:

    از لینک زیر هم میتونید ۲ تا فایل رو دانلود کنین:
    http://s4.picofile.com/file/8374574468/Counter.rar.html

  14. سجاد گفت:

    نه اگر داخل index.js بنویسم و فقط همین یک کامپوننت رو خروجی بگیرم مشکلی نداره… اما خب من دوتا Component دارم توی ۲ تا Route مختلف.
    شما از store.subscribe استفاده کردین برای به روز کردن Component با هر بار اجرا شدن Action اما توی پروژه من این کار ممکن نیست چون خطا میده و در نهایت من باید کامپوننت و export default کنم.
    مشکل من این که هر بار که action ها اجرا میشن اون شمارنده در state به روز میشه ینی عددش کم و زیاد میشه اما در کامپوننت ( در اون Route ی که قرار دارم ) عددش ۰ باقی میمونه. تنها در صورتی به روز میشه که هر بار که Action و اجرا میکنم یک بار روی Link کلیک کنم تا توی صفحه هم اون شمارنده به روز بشه… در واقع من اگر ۱۰ بار روی دکمه increment کلیک کنم هیچ اتفاقی نمیوفته در صفحه تا زمانی که روی Link کلیک کنم اون عدد توی صفحه به ۱۰ تغییر میکنه. من میخوام این تغییر در لحظه با هر بار کلیک روی دکمه اتفاق بیوفته.

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

برای اطلاع از کدهای تخفیف و به روز رسانی دوره‌ها، عضو کانال تلگرام فرانت کست شوید. t.me/frontcast