شروع کار با Redux | آموزش React

Redux چیست؟

Redux یک محفظه حالت قابل پیش بینی برای برنامه های جاوا اسکریپت است که به React محدود نمی شود، می بینید؟ این یک روش متمرکز و قابل پیش بینی برای مدیریت وضعیت یک برنامه ارائه می دهد، و ردیابی و به روز رسانی داده ها را در هنگام جریان از طریق اجزای مختلف آسان تر می کند. Redux از اصول معماری Flux پیروی می کند و بر یک منبع واحد از حقیقت و تغییر ناپذیری تأکید دارد. Redux با حفظ یک فروشگاه جهانی و استفاده از کاهنده‌ها برای مدیریت تغییرات حالت، به ساده‌سازی جریان‌های پیچیده داده، بهبود قابلیت‌های اشکال زدایی و تسهیل توسعه کارآمد برنامه کمک می‌کند.

یادگیری با ساختن

قراره چی بسازیم؟

یک برنامه شمارنده ساده که مقدار شمارش و عملکردی را برای به روز رسانی مقدار شمارش نمایش می دهد.

ما می خواهیم یاد بگیریم که چگونه به مقدار حالت ذخیره شده توسط redux (جایی که نحوه عملکرد انتخابگر را می بینیم) در بخش اول دسترسی پیدا کنیم و سپس به بخش به روز رسانی وضعیت (جایی که مقدار count را با استفاده از آن کم یا زیاد می کنیم) می رویم. دکمه ای که در آن ما ارسال را در عمل مشاهده خواهیم کرد).

الزامات:

1. جاوا اسکریپت: درک کاملی از اصول جاوا اسکریپت، از جمله متغیرها، توابع، اشیا، آرایه ها و ویژگی های ES6.

2. React: آشنایی با اصول اولیه React مانند کامپوننت ها، حالت، پروپ ها و روش های چرخه حیات.

3. مدیریت حالت: درک اصول اولیه مدیریت وضعیت برنامه، از جمله مفهوم جریان داده های یک طرفه.

4. معماری Flux: درک سطح بالایی از الگوی معماری Flux، که Redux بر اساس آن است. (در واقع برای این آموزش لازم نیست، اما خوب است)

5. جاوا اسکریپت ناهمزمان: دانش مفاهیم جاوا اسکریپت ناهمزمان، مانند Promises و async/wait. (در واقع برای این آموزش لازم نیست)

نصب و راه اندازی

1. خط فرمان را باز کنید و به فهرستی که می‌خواهید پروژه را در آن ایجاد کنید بروید

2. راه اندازی یک برنامه react با ایجاد برنامه react

npx create-react-app counterapp

cd counterapp

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

npm install @reduxjs/toolkit

npm install react-redux

1. خودشه. اکنون شما آماده استفاده از redux در برنامه react خود هستید.

2. فقط npm start را در خط فرمان تایپ کنید

بخش I: ذخیره، برش، دسترسی به مقدار حالت

بیایید بلافاصله شروع کنیم.

من در مورد شما نمی دانم، اما من دوست دارم پوشه src را به طور کلی پاک کنم زیرا بیشتر آنها مورد نیاز نیستند.

ایجاد فایل index.js & app.js

یک فایل به نام index.js در پوشه src ایجاد کنید و موارد زیر را در آن قرار دهید

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { Provider } from 'react-redux';
import store from './app/store';

ReactDOM.createRoot(document.getElementById('root')).render(
  <Provider store={store} >
    <App />
  </Provider>
);

توضیح: مؤلفه Provider مؤلفه App را می‌پیچد و دسترسی به فروشگاه Redux را در سراسر برنامه امکان‌پذیر می‌سازد. این به یک پایه فروشگاه نیاز دارد که باید نمونه فروشگاه Redux باشد.

فایل دیگری به نام App.js را در داخل پوشه src ایجاد کرده و درج کنید

import Counter from "./components/Counter";

export default function App() {
  return (
      <Counter />
  );
}

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

ایجاد فروشگاه

در Redux، فروشگاه یک مفهوم اصلی است که به عنوان یک کانتینر متمرکز برای نگهداری وضعیت برنامه عمل می کند. این تنها منبع حقیقت برای کل داده های برنامه است. فروشگاه وضعیت را مدیریت می کند و روش هایی را برای تعامل و به روز رسانی آن ارائه می دهد.

پوشه ای به نام app در داخل دایرکتوری src ایجاد کنید و داخل پوشه برنامه، فایلی به نام store.js ایجاد کنید و درج کنید.

import { configureStore } from '@reduxjs/toolkit'
import counterReducer from '../components/counterSlice'

export default configureStore({
    reducer: {
        counter : counterReducer
    }
})

توضیح: ما در حال ایجاد و صادرات یک فروشگاه Redux با استفاده از تابع configureStore از کتابخانه @reduxjs/toolkit هستیم. کاهنده ‘counterReducer’ هنوز از برش صادر نشده است، اما به زودی به آن خواهیم رسید.

ایجاد یک برش

در Redux، Slice مفهومی است که توسط Redux Toolkit (مجموعه ای از ابزارهای کاربردی برای Redux) معرفی شده است که به سازماندهی و محصور کردن بخش های مرتبط از ایالت، همراه با کاهش دهنده ها و اقدامات مربوطه کمک می کند.

پوشه ای به نام components در دایرکتوری src ایجاد کنید و در داخل آن، فایلی به نام counterSlice.js ایجاد کنید و درج کنید.

import { createSlice } from '@reduxjs/toolkit'

export const counterSlice =  createSlice({
    name: 'counter',
    initialState: {
        value: 0
    }
})

export default counterSlice.reducer

توضیح: یک برش برای شناسایی آنها به یک نام منحصر به فرد در رشته نیاز دارد. ما می‌توانیم مقدار حالت اولیه و کاهش‌دهنده‌ها را در داخل برش تنظیم کنیم، اما در اینجا، هیچ کاهنده‌ای را تنظیم نکرده‌ایم که به زودی در حین به‌روزرسانی تعداد، تنظیم خواهیم کرد.

ایجاد کامپوننت ما برای دیدن نتیجه

فایل دیگری به نام Counter.js را در داخل پوشه کامپوننت ایجاد کرده و درج کنید

import React from 'react'
import { useSelector } from 'react-redux'

const Counter = () => {
    const count = useSelector(state => state.counter.value)
  return (
    <div>
        <p>Count:  {count}</p>
    </div>
  )
}

export default Counter

توضیح: از قلاب useSelector برای انتخاب و استخراج ویژگی مقدار از برش شمارنده حالت ذخیره Redux استفاده می شود. این مؤلفه را برای به‌روزرسانی‌های آن بخش حالت خاص مشترک می‌کند.

خروجی

Count: 0

بخش دوم: Reducers & useDispatch

اکنون که نحوه دسترسی به مقدار وضعیت ذخیره شده در فروشگاه redux را فهمیدیم، بیایید به نحوه به‌روزرسانی وضعیت با استفاده از کاهنده‌ها و استفاده از قلاب Dispatch برویم.

تعریف کاهنده ها

counterSlice.js را به شکل زیر تغییر دهید

import { createSlice } from '@reduxjs/toolkit'

export const counterSlice =  createSlice({
    name: 'counter',
    initialState: {
        value: 0
    },
    reducers: {
        increment: state => {state.value += 1},
        decrement: state => {state.value -= 1},
    }
})

export const {increment, decrement} = counterSlice.actions

export default counterSlice.reducer

توضیح: در اینجا، دو کاهش دهنده را “افزایش” و “کاهش” اعلام کردیم که به سادگی با افزایش یا کاهش وضعیت گذشته، مقدار حالت به روز شده را برمی گرداند. همچنین، ببینید که کاهنده ها به عنوان اکشن صادر می شوند، زیرا آنها اقداماتی هستند که قلاب useDispatch برای به روز رسانی حالت نیاز دارد.

با استفاده از قلاب useDispatch().

همچنین فایل Counter.js را اصلاح کنید

import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { decrement, increment } from './counterSlice'
import './counter.css'
const Counter = () => {
    const count = useSelector(state => state.counter.value)
    const dispatch = useDispatch()
    return (
        <div className="box" >
            <p className="count"><span>Count: </span>{count}</p>
            <div className=" btn " >
                <button onClick={() => dispatch(increment())} >Add</button>
                <button onClick={() => dispatch(decrement())} >Subtract</button>
            </div>
        </div>
    )
}

export default Counter

توضیح: در اینجا از useDispatch hook برای مدیریت رویداد استفاده کردیم. و همچنین، من برخی از سبک های اساسی را قرار داده ام. تمام کدهای تا کنون به همراه فایل سبک را می توانید در مخزن GitHub من در اینجا پیدا کنید.

نتیجه باید به این شکل باشد.

نتیجه

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

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

پست اصلی