توضیحات
Redux یک کتابخانه متن باز است که با زبان برنامه نویسی جاوااسکریپت توسعه داده شده. به کمک این کتابخانه قدرتمند می‌توانیم Stateهای نرم افزار را به سادگی مدیریت کنیم. Redux بیشتر در کنار ReactJS استفاده می‌شود. اما انعطاف و معماری این تکنولوژی باعث شده تا بتوانیم برای سایر کتابخانه‌های UI (رابط کاربری) نیز از آن استفاده کنیم.
زمانی که قابلیت‌های نرم افزار ما بیشتر و متنوع‌تر می‌شوند، مدیریت Stateها تا حدی پیچیده‌تر خواهد شد. Redux باعث می‌شود تا این فرآیند، ساده‌تر و منطقی‌تر انجام شود.
در طول این دوره تلاش کرده‌ایم تا با یک رویکرد ساده، مفاهیم Redux را توضیح دهیم. پیش نیاز این دوره، دوره آموزشی ReactJS است.
استارتاپ رایچت در طول این دوره همراه ما بودند و با حمایت مادی خود کمک کردند تا این دوره به صورت رایگان در اختیار شما دانشجویان عزیز قرار گیرد.
سرفصل‌های دوره
معرفی دوره. بررسی کتابخانه Redux و کاربردهای آن
۱. پیاده سازی مثال شمارنده با Stateهای ReactJS – قسمت اول
۲. پیاده سازی مثال شمارنده با Stateهای ReactJS – قسمت دوم
۳. بررسی مفاهیم ریداکس – Actions
۴. بررسی مفاهیم ریداکس – Reducers
۵. بررسی مفاهیم ریداکس – Store – مشاهده ویدیو
۶. پیاده سازی مثال شمارنده با ریداکس – توسعه کامپوننت شمارنده
۷. پیاده سازی مثال شمارنده با ریداکس – توسعه تابع Reducer – مشاهده ویدیو
۸. پیاده سازی مثال شمارنده با ریداکس – اضافه کردن Store
۹. پیاده سازی مثال شمارنده با ریداکس – فراخوانی Actions
24 پاسخ به “آموزش مفاهیم Redux”
تشکر فراوان جناب صدری بسیار لطف کردین
خیلی ممنونم، امیدوارم براتون مفید باشه
همه آموزش هاتون عالیه، ادامه بدید
ممنونم از لطفتون، بله حتما
خسته نباشی مهندس. مثل همیشه خیلی خوب بود. هنوز ادامه داره یا همین ۱۰ قسمت بود ؟
خیلی ممنونم. این دوره برای شروع یادگیری ریداکس هست. ادامه این مباحث، دوره پیشرفته React/Redux خواهد بود که توی برنامم هستش.
خدا خیرتون بده استاد.
من یه مدت دنبال آموزش ریداکس بودم ولی خیلی پیچیده آموزش داده بودن ، شما خیلی ساده و مفهومی توضیح دادین و نگرانیم از بایت یادگیریش برطرف شد، نمیدونم چطوری ازتون تشکر کنم ، عالی بود.
خوشحالم که اینو می‌شنوم ازتون 🙂
تشکر فراوان جناب صدری
من تا الان کمی با ریداکس کار کردم ولی واقعیتش خیلی به مشکل میخورم و مجبورم که با سعی و خطا جلو برم
امروز این دوره رو دانلود میکنم
برقرار باشید 🙂
ممنون از این که ثبت نام کردین. امیدوارم براتون مفید باشه 🙂
سلام استاد صدری ممنونم از آموزششاتون همشونو تا حالا دیدم
اما ممنون میشم یه تمرینی بهم بدید یه پروژه ای چیزی تا خودمو به چالش بکشم ببینم چی بلدم!؟
سلام. ممنون که برای دوره‌ها ثبت نام کردین 🙂 امیدوارم براتون مفید باشه. لطفا از طریق ایمیل یا واتس‌اپ پیام بدین تا براتون بفرستم.
سلام استاد وقتتون بخیر
دوره بعدی redux ، دوره پیشرفته کی شروع میشه؟
سلام
دوره بعدی Node.js هست، انشاالله بعد از اون دوره پیشرفته React/Redux رو آماده میکنم.
لطفا آموزش React Hooks قرار بدین – منبع فارسی زیاد نداریم -ممنون میشم -مرسی استاد
آقا خیلی ممنون از آموزشتون ، خسته هم نباشید، واقعا مفهمومی و عالی
مرسی از لطفتون 🙂
سلام، خیلی ممنون عالی بود و ساده توضیح داده بودید.
فقط من برنامه ام رو به دو بخش تقسیم کردم. ینی route روت شمارنده ای که با react نوشتیم رو نمایش میده و یک Route جداگانه برای شمارنده با redux نوشتم.
شما در آخرین قسمت فیلم ها داخل فایل index.js فقط همون یک component رو رندر کردین.
من ریداکس رو داخل فایل app.js ایمپورت کردم و prop ها از طریق Route رو پاس دادم به component ی که با ریداکس نوشتم. توی redux dev tools شمارنده درست کار میکنه اما تغییرات توی صفحه اعمال نمیشه… در این حالت چطور باید صفحه رو با هر بار اجرا شدن توابع به روز کنم؟
سلام
ممنون از شما.
لطفا کدهاتون رو برام ارسال کنید که دقیق‌تر بررسی کنم.
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 باشن هم ارور دارین؟
از لینک زیر هم میتونید ۲ تا فایل رو دانلود کنین:
http://s4.picofile.com/file/8374574468/Counter.rar.html
نه اگر داخل index.js بنویسم و فقط همین یک کامپوننت رو خروجی بگیرم مشکلی نداره… اما خب من دوتا Component دارم توی ۲ تا Route مختلف.
شما از store.subscribe استفاده کردین برای به روز کردن Component با هر بار اجرا شدن Action اما توی پروژه من این کار ممکن نیست چون خطا میده و در نهایت من باید کامپوننت و export default کنم.
مشکل من این که هر بار که action ها اجرا میشن اون شمارنده در state به روز میشه ینی عددش کم و زیاد میشه اما در کامپوننت ( در اون Route ی که قرار دارم ) عددش ۰ باقی میمونه. تنها در صورتی به روز میشه که هر بار که Action و اجرا میکنم یک بار روی Link کلیک کنم تا توی صفحه هم اون شمارنده به روز بشه… در واقع من اگر ۱۰ بار روی دکمه increment کلیک کنم هیچ اتفاقی نمیوفته در صفحه تا زمانی که روی Link کلیک کنم اون عدد توی صفحه به ۱۰ تغییر میکنه. من میخوام این تغییر در لحظه با هر بار کلیک روی دکمه اتفاق بیوفته.