useReducer: React Hooks

useReducer dalam React: Permudahkan Pengurusan Negeri dengan Dua Projek Mini

pengenalan

Pengurusan negeri ialah bahagian penting dalam membina aplikasi dinamik dan interaktif dalam React. Walaupun useState mencukupi untuk mengurus keadaan mudah, apabila keadaan aplikasi anda bertambah dalam kerumitan, useReducer menawarkan cara yang lebih berkuasa dan boleh diramal untuk mengendalikannya. Diilhamkan oleh corak pengurang Redux, useReducer membolehkan anda menentukan cara peralihan keadaan harus berlaku sebagai tindak balas kepada tindakan tertentu, menjadikannya sesuai untuk senario dengan kemas kini keadaan berbilang kompleks.

Dalam artikel ini, kami akan:

1. Telusuri penjelasan yang jelas tentang useReducer, sintaksnya dan masa untuk menggunakannya.
2. Melaksanakan dua projek mini:
   • Balas dengan Pelbagai Tindakan: Contoh yang melangkaui kenaikan/penurunan asas, menunjukkan cara useReducer mengendalikan berbilang jenis tindakan.
   • Senarai Tugasan dengan Peralihan Keadaan Kompleks: Apl tugasan yang menyerlahkan keupayaan useReducer untuk mengurus objek keadaan kompleks.

Mari kita mendalami cara useReducer boleh memudahkan pengurusan keadaan anda dalam React!

Memahami useReducer

Apakah useReducer?

useReducer ialah cangkuk React yang direka untuk situasi di mana useState gagal. Daripada mengemas kini keadaan terus, anda menentukan fungsi pengurang yang mengira keadaan seterusnya berdasarkan keadaan semasa dan tindakan. Pendekatan deklaratif ini memastikan peralihan keadaan boleh diramal dan membolehkan anda mengurus logik keadaan yang lebih kompleks dengan cara terpusat.

Sintaks useReducer

Berikut ialah pecahan sintaks:

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

• pengurang: Fungsi yang mentakrifkan cara keadaan perlu dikemas kini berdasarkan tindakan. Ia memerlukan dua hujah:

  • negeri: Keadaan semasa.
  • tindakan: Objek dengan maklumat tentang tindakan, biasanya termasuk jenis dan muatan pilihan.

• initialState: Nilai permulaan untuk keadaan.

Contoh: Kaunter Asas dengan useReducer

Mari kita buat pembilang mudah menggunakan useReducer untuk melihat sintaks dalam tindakan.

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;

Penjelasan Kod

1. Fungsi Pengurang: Fungsi ini mentakrifkan cara mengendalikan tindakan. Berdasarkan jenis tindakan (kenaikan atau pengurangan), fungsi pengurang mengembalikan objek keadaan baharu.
2. Tindakan Penghantaran: penghantaran menghantar tindakan kepada pengurang, yang memprosesnya dan mengemas kini keadaan sewajarnya.

Bila hendak menggunakan useReducer

useReducer amat berguna apabila:

• Logik keadaan adalah kompleks atau melibatkan berbilang sub-nilai.
• Keadaan seterusnya bergantung pada keadaan sebelumnya.
• Berbilang komponen perlu mengakses keadaan yang diuruskan oleh pengurang (anda boleh menggabungkan useReducer dengan useContext untuk keadaan global).

Projek Mini 1: Balas dengan Pelbagai Tindakan

Dalam projek ini, kami akan mencipta pembilang yang dipertingkatkan yang membolehkan berbilang operasi (kenaikan, pengurangan, penetapan semula) untuk melihat cara useReducer mengendalikan set tindakan yang lebih luas.

Langkah 1: Tentukan Fungsi Pengurang

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

Langkah 2: Buat Komponen Kaunter

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;

Kaunter yang dipertingkat ini kini menyokong kefungsian tetapan semula sebagai tambahan kepada kenaikan dan penurunan. Projek ini menunjukkan fleksibiliti useReducer dalam mengurus tindakan untuk kemas kini keadaan.

Projek Mini 2: Membina Senarai Tugasan dengan Peralihan Keadaan Kompleks

Apl senarai tugasan menyerlahkan cara useReducer sesuai untuk mengurus objek keadaan kompleks dengan berbilang peralihan, seperti menambah, mengalih keluar dan menogol tugas.

Langkah 1: Tentukan Pengurangan

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}`);
    }
}

Langkah 2: Buat Komponen Senarai Tugasan

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

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

    const handleTambah = () => {
        jika (task.trim()) {
            dispatch({ type: 'add', payload: task });
            setTask(''); // Kosongkan medan input
        }
    };

    kembali (
        <div>
            <h2>Senarai Tugasan</h2>
            <masukan
                value={task}
                onChange={e => setTask(e.target.value)}
                placeholder="Masukkan tugasan baharu"
            />
            <butang onClick={handleAdd}>Tambah Tugas</button>

            <ul>
                {todos.map(todo => (
                    <li key={todo.id}>



<h3>
  
  
  Penjelasan Kod Senarai Tugasan
</h3>

<ol>
<li>
<p><strong>Tindakan</strong>:</p>

<ul>
<li>
<strong>Tambah</strong>: Menambah tugas baharu pada senarai dengan ID unik dan status lengkap ditetapkan kepada palsu.</li>
<li>
<strong>Alih keluar</strong>: Memadamkan tugasan dengan menapisnya berdasarkan ID.</li>
<li>
<strong>Togol</strong>: Menandai tugas sebagai selesai atau belum selesai dengan menogol status selesai.</li>
</ul>
</li>
<li><p><strong>Menggunakan useReducer dengan Data Dinamik</strong>: Contoh ini menunjukkan cara useReducer mengendalikan kemas kini keadaan yang kompleks dan bersarang dalam pelbagai objek, menjadikannya sempurna untuk mengurus item dengan berbilang sifat.</p></li>
</ol>


<hr>

<h2>
  
  
  Kesimpulan
</h2>

<p>Dalam artikel ini, anda telah mempelajari cara menggunakan useReducer dengan berkesan untuk pengurusan keadaan yang lebih kompleks dalam aplikasi React. Melalui projek kami:</p><ol>
<li>
<strong>Kaunter Dipertingkat</strong> menunjukkan cara useReducer memudahkan berbilang kemas kini keadaan berasaskan tindakan.</li>
<li>
<strong>Senarai Tugasan</strong> menggambarkan cara mengurus objek keadaan kompleks, seperti tatasusunan tugas, dengan useReducer.</li>
</ol>

<p>Dengan useReducer, anda boleh menulis kod yang lebih bersih, lebih boleh diramal dan boleh diselenggara untuk aplikasi yang memerlukan pengurusan keadaan yang mantap. Eksperimen dengan projek ini dan pertimbangkan untuk menggunakanReducer pada kali seterusnya anda menghadapi logik keadaan kompleks dalam apl React anda!</p>


          

            
        

Atas ialah kandungan terperinci useReducer: React Hooks. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!