useReducer: React Hooks – DEV Community

Summarize this content to 400 words in Persian Lang

useReducer در React: Simplify State Management با دو پروژه کوچک

مقدمه

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

در این مقاله، ما:

از طریق توضیح واضحی از useReducer، نحو آن و زمان استفاده از آن.
اجرای دو پروژه کوچک:

شمارنده با اقدامات متعدد: مثالی که فراتر از افزایش/کاهش اساسی است و نشان می دهد که چگونه useReducer چندین نوع عمل را کنترل می کند.

فهرست کارها با انتقال وضعیت پیچیده: یک برنامه کاری که برجسته می کند useReducerتوانایی مدیریت اشیاء حالت پیچیده

بیایید به چگونگی آن بپردازیم useReducer می تواند مدیریت حالت شما را در React ساده کند!

درک کردن useReducer

چیست useReducer?

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

نحو از useReducer

در اینجا یک تفکیک از نحو است:

const [state, dispatch] = useReducer(reducer, initialState);

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

reducer: تابعی که نحوه به روز رسانی حالت را بر اساس عمل تعریف می کند. دو استدلال نیاز دارد:

state: وضعیت فعلی

action: یک شی با اطلاعات مربوط به عمل، معمولاً شامل a type و اختیاری payload.

initialState: مقدار شروع برای ایالت.

مثال: شمارنده اولیه با useReducer

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

import React, { useReducer } from ‘react’;

function reducer(state, action) {
switch (action.type) {
case ‘increment’:
return { count: state.count + 1 };
case ‘decrement’:
return { count: state.count – 1 };
default:
return state;
}
}

function Counter() {
const [state, dispatch] = useReducer(reducer, { count: 0 });

return (
<div>
<p>Count: {state.count}</p>
<button onClick={() => dispatch({ type: ‘increment’ })}>Increment</button>
<button onClick={() => dispatch({ type: ‘decrement’ })}>Decrement</button>
</div>
);
}

export default Counter;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

توضیح آیین نامه

عملکرد کاهنده: این تابع نحوه مدیریت اقدامات را تعریف می کند. بر اساس نوع عمل (increment یا decrement)، تابع کاهنده یک شی حالت جدید را برمی گرداند.

عملیات اعزام: dispatch عملی را به کاهنده ارسال می کند، که آن را پردازش می کند و وضعیت را بر این اساس به روز می کند.

زمان استفاده useReducer

useReducer به ویژه زمانی مفید است که:

منطق حالت پیچیده است یا شامل چندین ارزش فرعی است.
حالت بعدی به حالت قبلی بستگی دارد.
چندین مؤلفه باید به حالت مدیریت شده توسط کاهنده دسترسی داشته باشند (می توانید ترکیب کنید useReducer با useContext برای دولت جهانی).

Mini Project 1: Counter with Multiple Actions

در این پروژه، ما یک شمارنده پیشرفته ایجاد می کنیم که به چندین عملیات (افزایش، کاهش، تنظیم مجدد) اجازه می دهد تا ببینیم چگونه useReducer مجموعه وسیع تری از اقدامات را انجام می دهد.

مرحله 1: تابع Reducer را تعریف کنید

import React, { useReducer } from ‘react’;

function reducer(state, action) {
switch (action.type) {
case ‘increment’:
return { count: state.count + 1 };
case ‘decrement’:
return { count: state.count – 1 };
case ‘reset’:
return { count: 0 };
default:
throw new Error(`Unknown action: ${action.type}`);
}
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مرحله 2: کامپوننت Counter را ایجاد کنید

function EnhancedCounter() {
const [state, dispatch] = useReducer(reducer, { count: 0 });

return (
<div>
<p>Count: {state.count}</p>
<button onClick={() => dispatch({ type: ‘increment’ })}>Increment</button>
<button onClick={() => dispatch({ type: ‘decrement’ })}>Decrement</button>
<button onClick={() => dispatch({ type: ‘reset’ })}>Reset</button>
</div>
);
}

export default EnhancedCounter;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این شمارنده پیشرفته اکنون علاوه بر افزایش و کاهش، از عملکرد تنظیم مجدد پشتیبانی می کند. این پروژه نشان می دهد useReducerانعطاف پذیری در مدیریت اقدامات برای به روز رسانی ایالت.

مینی پروژه 2: ایجاد لیست کارهایی با انتقال وضعیت پیچیده

برنامه فهرست کارها نحوه انجام آن را برجسته می کند useReducer برای مدیریت اشیاء حالت پیچیده با چندین انتقال، مانند افزودن، حذف و جابجایی وظایف ایده آل است.

مرحله 1: Reducer را تعریف کنید

function todoReducer(state, action) {
switch (action.type) {
case ‘add’:
return […state, { id: Date.now(), text: action.payload, completed: false }];
case ‘remove’:
return state.filter(todo => todo.id !== action.payload);
case ‘toggle’:
return state.map(todo =>
todo.id === action.payload ? { …todo, completed: !todo.completed } : todo
);
default:
throw new Error(`Unknown action type: ${action.type}`);
}
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مرحله 2: مؤلفه فهرست کارها را ایجاد کنید

import React, { useReducer, useState } from ‘react’;

function ToDoList() {
const [todos, dispatch] = useReducer(todoReducer, []);
const [task, setTask] = useState(”);

const handleAdd = () => {
if (task.trim()) {
dispatch({ type: ‘add’, payload: task });
setTask(”); // Clear input field
}
};

return (
<div>
<h2>To-Do List</h2>
<input
value={task}
onChange={e => setTask(e.target.value)}
placeholder=”Enter a new task”
/>
<button onClick={handleAdd}>Add Task</button>

<ul>
{todos.map(todo => (
<li key={todo.id} style={{ textDecoration: todo.completed ? ‘line-through’ : ‘none’ }}>
{todo.text}
<button onClick={() => dispatch({ type: ‘toggle’, payload: todo.id })}>
{todo.completed ? ‘Undo’ : ‘Complete’}
</button>
<button onClick={() => dispatch({ type: ‘remove’, payload: todo.id })}>Delete</button>
</li>
))}
</ul>
</div>
);
}

export default ToDoList;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

توضیح کد لیست کارها

اقدامات:

اضافه کنید: یک کار جدید با یک شناسه منحصر به فرد به لیست اضافه می کند و completed وضعیت روی false.

حذف کنید: یک کار را با فیلتر کردن آن بر اساس شناسه حذف می کند.

تغییر وضعیت دهید: یک کار را با تغییر دادن علامت به عنوان کامل یا ناتمام علامت گذاری می کند completed وضعیت

با استفاده از useReducer با داده های دینامیک: این مثال نشان می دهد که چگونه useReducer به‌روزرسانی‌های پیچیده و تودرتو در مجموعه‌ای از اشیاء را مدیریت می‌کند و آن را برای مدیریت آیتم‌هایی با ویژگی‌های متعدد عالی می‌کند.

نتیجه گیری

در این مقاله، نحوه استفاده موثر را یاد گرفتید useReducer برای مدیریت وضعیت پیچیده تر در برنامه های React. از طریق پروژه های ما:

را شمارنده پیشرفته نشان داد که چگونه useReducer به روز رسانی های چندگانه حالت مبتنی بر اقدام را ساده می کند.
را فهرست کارها نحوه مدیریت اشیاء حالت پیچیده، مانند آرایه‌های وظایف، با useReducer.

با useReducer، می توانید کدهای تمیزتر، قابل پیش بینی تر و قابل نگهداری برای برنامه هایی که نیاز به مدیریت حالت قوی دارند بنویسید. با این پروژه ها آزمایش کنید و در نظر بگیرید useReducer دفعه بعد که با منطق پیچیده حالت در برنامه های React خود مواجه می شوید!

const [state, dispatch] = useReducer(reducer, initialState);

import React, { useReducer } from 'react';

function reducer(state, action) {
    switch (action.type) {
        case 'increment':
            return { count: state.count + 1 };
        case 'decrement':
            return { count: state.count - 1 };
        default:
            return state;
    }
}

function Counter() {
    const [state, dispatch] = useReducer(reducer, { count: 0 });

    return (
        <div>
            <p>Count: {state.count}</p>
            <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
            <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
        </div>
    );
}

export default Counter;

import React, { useReducer } from 'react';

function reducer(state, action) {
    switch (action.type) {
        case 'increment':
            return { count: state.count + 1 };
        case 'decrement':
            return { count: state.count - 1 };
        case 'reset':
            return { count: 0 };
        default:
            throw new Error(`Unknown action: ${action.type}`);
    }
}

function EnhancedCounter() {
    const [state, dispatch] = useReducer(reducer, { count: 0 });

    return (
        <div>
            <p>Count: {state.count}</p>
            <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
            <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
            <button onClick={() => dispatch({ type: 'reset' })}>Reset</button>
        </div>
    );
}

export default EnhancedCounter;

function todoReducer(state, action) {
    switch (action.type) {
        case 'add':
            return [...state, { id: Date.now(), text: action.payload, completed: false }];
        case 'remove':
            return state.filter(todo => todo.id !== action.payload);
        case 'toggle':
            return state.map(todo =>
                todo.id === action.payload ? { ...todo, completed: !todo.completed } : todo
            );
        default:
            throw new Error(`Unknown action type: ${action.type}`);
    }
}

import React, { useReducer, useState } from 'react';

function ToDoList() {
    const [todos, dispatch] = useReducer(todoReducer, []);
    const [task, setTask] = useState('');

    const handleAdd = () => {
        if (task.trim()) {
            dispatch({ type: 'add', payload: task });
            setTask(''); // Clear input field
        }
    };

    return (
        <div>
            <h2>To-Do List</h2>
            <input
                value={task}
                onChange={e => setTask(e.target.value)}
                placeholder="Enter a new task"
            />
            <button onClick={handleAdd}>Add Task</button>

            <ul>
                {todos.map(todo => (
                    <li key={todo.id} style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>
                        {todo.text}
                        <button onClick={() => dispatch({ type: 'toggle', payload: todo.id })}>
                            {todo.completed ? 'Undo' : 'Complete'}
                        </button>
                        <button onClick={() => dispatch({ type: 'remove', payload: todo.id })}>Delete</button>
                    </li>
                ))}
            </ul>
        </div>
    );
}

export default ToDoList;