Menggunakan Immer untuk Pengurusan Negeri React

React Applications bergantung kepada status untuk menjejaki data aplikasi. Perubahan status dengan interaksi pengguna. Apabila keadaan berubah, kita perlu mengemas kini keadaan yang dipaparkan oleh antara muka pengguna, yang biasanya dilaksanakan menggunakan kaedah setState React.

Oleh kerana keadaan React tidak berubah (tidak dapat diubahsuai secara langsung), apabila keadaan menjadi kompleks, mengemaskini keadaan menjadi sangat rumit dan sukar difahami dan dikekalkan.

Di sinilah Immer bermain. Artikel ini akan meneroka bagaimana untuk memudahkan Pengurusan Negeri React menggunakan Immer. Immer menggunakan konsep "draf" (draf), yang boleh anda fahami sebagai salinan negara, bukan negara itu sendiri. Anda boleh bayangkan Immer melakukan operasi salinan di negeri ini dan kemudian mengubahnya di tempat yang selamat tanpa menjejaskan keadaan asal. Semua kemas kini dibuat pada draf, dan hanya bahagian yang diubah dalam draf akan dikemas kini ke keadaan sebenar.

Sebagai contoh, status aplikasi anda adalah seperti berikut:

 this.state = {
  Nama: 'Kunle',
  Umur: 30,
  Bandar: 'Lagos',
  Negara: 'Nigeria'
}

Jika pengguna merayakan ulang tahun ke -31nya, kita perlu mengemas kini nilai age . Menggunakan Immer, salinan negeri (draf) dibuat.

Bayangkan salinan ini diserahkan kepada utusan, yang menyerahkan salinan kepada Kunle. Kini terdapat dua replika: keadaan semasa dan draf replika yang diserahkan kepada Kunle. Kunle mengubah age dalam draf ke 31. Rasul itu kemudian mengembalikan draf yang diubah suai ke aplikasinya, aplikasinya membandingkan dua versi, dan hanya mengemas kini age , kerana ini adalah satu -satunya bahagian draf yang telah berubah.

Kaedah ini tidak memecahkan prinsip keadaan yang tidak berubah, kerana keadaan semasa tidak akan diubahsuai secara langsung. Immer memudahkan pengurusan negara -negara yang tidak berubah.

Contoh praktikal: lampu isyarat

Mari kita bina aplikasi lampu lalu lintas yang mudah dengan Immer.

Menggunakan Immer, kod komponen adalah seperti berikut:

 const {produce} = immer;

Aplikasi Kelas memanjangkan React.Component {
  Negeri = {
    Merah: 'merah', 
    Kuning: 'Hitam', 
    Hijau: 'Hitam',
    Seterusnya: "Kuning"
  };

  componentDidMount () {
    this.interval = setInterVal (() => this.changeHandle (), 3000);
  }

  ComponentWillUnmount () {
    clearInterval (this.interval);
  }

  handleredlight = () => {
    ini.setstate (
      menghasilkan (draf => {
        draf.red = 'merah';
        draf.yellow = 'hitam';
        draf.green = 'hitam';
        draf.next = 'kuning';
      })
    );
  };

  handLeLellowlight = () => {
    ini.setstate (
      menghasilkan (draf => {
        draf.red = 'hitam';
        draf.yellow = 'kuning';
        draf.green = 'hitam';
        draf.next = 'hijau';
      })
    );
  };

  handleGreenlight = () => {
    ini.setstate (
      menghasilkan (draf => {
        draf.red = 'hitam';
        draf.yellow = 'hitam';
        draf.green = 'hijau';
        draf.next = 'merah';
      })
    );
  };

  changeHandle = () => {
    jika (this.state.next === 'Yellow') {
      this.handLeyellowlight ();
    } else if (this.state.next === 'Green') {
      this.handlegreenlight ();
    } else {
      this.handleredlight ();
    }
  };

  render () {
    Kembali (
      <div classname="box">
        <div classname="circle" style="{{backgroundColor:" this.state.red></div>
        <div classname="circle" style="{{backgroundColor:" this.state.yellow></div>
        <div classname="circle" style="{{backgroundColor:" this.state.green></div>
      </div>
    );
  }
}

produce adalah fungsi lalai yang disediakan oleh Immer. Kami lulus ini sebagai parameter kepada kaedah setState . Fungsi produce menerima fungsi yang menerima draft sebagai hujah. Di dalam fungsi ini, kita boleh mengubah suai salinan draft .

Cara yang lebih mudah untuk menulis:

 const handlelight = (state) => {
  Pulangan menghasilkan (negeri, (draf) => {
    draf.red = 'hitam';
    draf.yellow = 'hitam';
    draf.green = 'hijau';
    draf.next = 'merah';
  });
};

// Gunakan dalam komponen:
handleGreenlight = () => {
  const NextState = HandLelight (this.state);
  this.setState (NextState);
};

Kami lulus keadaan semasa dan fungsi yang menerima draft sebagai hujah kepada fungsi produce .

Contoh lain: Senarai Membeli -belah

Jika anda telah menggunakan React untuk seketika, anda harus biasa dengan pengendali penyebaran. Menggunakan Immer, terutamanya apabila berurusan dengan keadaan Array, anda tidak perlu menggunakan pengendali lanjutan.

Mari buat aplikasi Senarai Belanja untuk menggambarkan ini lebih lanjut.

Kod Komponen:

 Aplikasi Kelas memanjangkan React.Component {
  // ... (pembina dan kaedah lain) ...

  handlesubmit = (e) => {
    E.PreventDefault ();
    const newItem = {
      id: uuid.v4 (),
      Nama: this.state.name,
      Harga: this.state.price
    };
    ini.setstate (
      menghasilkan (draf => {
        draf.list = draft.list.concat (newItem);
      })
    );
  };

  // ... (kaedah render) ...
}

Apabila menambah produk baru, kita perlu mengemas kini status senarai. Gunakan pengendali setState dan lanjutan:

 handlesubmit = (e) => {
  // ...
  this.setState ({list: [... this.state.list, newItem]});
};

Menggunakan pengendali lanjutan boleh menjadi sangat rumit jika beberapa negeri perlu dikemas kini. Menggunakan Immer, ini menjadi sangat mudah.

Bagaimana jika kita mahu memanggil fungsi panggil balik setelah keadaan dikemas kini? Sebagai contoh, kami ingin mengira jumlah harga item dalam senarai.

 handlesubmit = (e) => {
  // ...
  ini.setstate (
    menghasilkan (draf => {
      draf.list = draft.list.concat (newItem);
    }), () => {
      this.calculateamount (this.state.list);
    }
  );
};

calculateamount = (senarai) => {
  biarkan total = 0;
  list.Foreach (item => total = item.price);
  ini.setstate (
    menghasilkan (draf => {
      draf.totalamount = total;
    })
  );
};

Fungsi panggil balik dipanggil selepas status dikemas kini dan status yang dikemas kini digunakan.

Cangkuk immer

use-immer adalah cangkuk yang membolehkan anda menguruskan keadaan dalam aplikasi React. Mari kita tunjukkan dengan contoh kaunter yang mudah:

 import bertindak balas daripada "bertindak balas";
import {useImmer} dari "use-immer";

const counter = () => {
  const [count, updateCounter] = useImmer ({value: 0});

  peningkatan fungsi () {
    UpdateCounter (draf => {
      draf.value;
    });
  }

  Kembali (
    <div>
      <h1 id="Kaunter-count-value">Kaunter {count.value}</h1>
      <button onclick="{increment}">Kenaikan</button>
    </div>
  );
};

kaunter lalai eksport;

useImmer adalah serupa dengan useState . Ia mengembalikan status dan fungsi kemas kini. Apabila komponen dimuatkan, nilai status adalah sama dengan nilai yang diluluskan kepada useImmer . Menggunakan fungsi kemas kini yang dikembalikan, kami boleh membuat fungsi increment untuk meningkatkan nilai kaunter.

Immer juga menyediakan cangkuk yang serupa dengan useReducer : useImmerReducer .

Meringkaskan

Anda boleh mula menggunakan Immer dalam projek anda yang seterusnya, atau secara beransur -ansur memohon kepada projek semasa anda. Ia memudahkan reaksi pengurusan keadaan. Contoh kod boleh didapati di GitHub. (Sila berikan pautan github jika ada)

Atas ialah kandungan terperinci Menggunakan Immer untuk Pengurusan Negeri React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!