Menguruskan Negeri dalam React Menggunakan Next-Next

Artikel ini membina perbincangan sebelumnya mengenai pengurusan negeri menggunakan yang tidak dinyatakan, meneroka yang tidak dinyatakan, penggantinya. Leverage-next leverage react cangkuk dan API konteks untuk pengurusan negeri yang diperkemas, menawarkan pendekatan yang lebih efisien daripada pendahulunya, terutamanya memandangkan kemajuan dalam cangkuk React. Kami akan mengkaji pengurusan negeri tunggal dan pelbagai komponen menggunakan NEXT yang tidak dinyatakan. Kebiasaan dengan artikel yang tidak dinyatakan sebelumnya adalah berguna tetapi tidak diperlukan dengan ketat.

Contoh komponen bentuk minimum

Kami akan membuat borang reaksi mudah dengan input teks untuk nama dan butang hantar. Apabila penyerahan, nama itu akan dipaparkan di atas borang. Kod lengkap boleh didapati di GitHub. Contoh ini menggunakan Create React App dan Bootstrap.

Pertama, sediakan projek:

 NPX Create-React-App-App-Next-Next-Form
CD Unded-Next-Form

Pasang yang tidak dinyatakan:

 # benang
Benang Tambah Next-Next

# npm
pemasangan npm-save unded-next

Import modul yang diperlukan ke dalam App.js :

 // src/app.js
Import React, {Usestate} dari 'React';
import {createContainer} dari "unsed-next";

Buat cangkuk tersuai:

 // src/app.js
// ... import sebelumnya

const useForm = () => {
  const [input, setValue] = useState ("");
  const [nama, setName] = useState ("Barney Stinson");

  const handleInput = (event) => setValue (event.target.value);
  const updatename = (event) => {
    event.PreventDefault ();
    setName (input);
    setValue ("");
  };

  kembali {input, nama, handleinput, updatename};
};

Buat bekas menggunakan createContainer :

 // src/app.js
// ... kod sebelumnya

const formContainer = createContainer (useForm);

Buat Komponen Borang:

 // src/app.js
// ... kod sebelumnya

const form = () => {
  borang const = formContainer.useContainer ();
  kembali (
    <div>
      <p>Helo! {form.name}</p>
      <form onsubmit="{form.updateName}">
        <input type="text" value="{form.input}" onchange="{form.handleInput}">
        <button type="submit">Simpan</button>
      </form>
    </div>
  );
};

Balut komponen borang dengan pembekal dalam komponen aplikasi:

 const app = () => (
  <formcontainer.provider>
    <form></form>
  </formcontainer.provider>
);

Ini melengkapkan contoh bentuk minimum. Cuba bina aplikasi yang mudah dilakukan menggunakan konsep-konsep ini. Repositori rujukan boleh didapati.

Berkongsi keadaan di pelbagai komponen

Contoh ini menunjukkan perkongsian keadaan antara bentuk dan senarai tugasan. Nama pengguna, yang dikemas kini dalam borang, akan mencerminkan dalam senarai tugasan.

Buat projek baru dan pasangkan kebergantungan:

 NPX Create-react-app unded-next-app
CD Unded-Next-App
benang tambah pendek yang tidak dinyatakan

Buat store.js untuk menguruskan keadaan bersama:

 // src/store.js
import {useState} dari "React";
Import pendek dari "pendek";
import {CreateContainer} dari 'Undated-Next';

const useStore = () => {
  const [input, setValue] = useState ("");
  const [nama, setName] = useState ("Barney Stinson");
  const [todos, setTodos] = useState ([{id: 1, tajuk: 'tulis kod'}, {id: 2, tajuk: 'membeli susu'}]);
  const [item, setItem] = useState ("");

  const handleInput = (event) => setValue (event.target.value);
  const updatename = (event) => {
    event.PreventDefault ();
    setName (input);
    setValue ("");
  };
  const handleItem = (event) => setItem (event.target.value);
  const handlesubmit = (event) => {
    event.PreventDefault ();
    setTodos ([... todos, {id: shortid.generate (), tajuk: item}]);
    setItem ("");
  };

  kembali {input, nama, handleinput, updatename, todos, item, handleitem, handlesubmit};
};

eksport const StoreContainer = CreateContainer (UseStore);

Buat form.js :

 // src/form.js
import bertindak balas daripada "bertindak balas";
import {StoreContainer} dari "./Store";

const formComponent = () => {
  borang const = StoreContainer.useContainer ();
  kembali (
    <div>
      <p>Helo! {form.name}</p>
      <form onsubmit="{form.updateName}">
        <input type="text" value="{form.input}" onchange="{form.handleInput}">
        <button type="submit">Tukar nama</button>
      </form>
    </div>
  );
};

Eksport Formponent Default;

Buat todo.js :

 // src/todo.js
import bertindak balas daripada "bertindak balas";
import {StoreContainer} dari "./Store";

const todocomponent = () => {
  const todo = StoreContainer.useContainer ();
  kembali (
    <div>
      <p>Tambah todos</p>
      <form onsubmit="{todo.handleSubmit}">
        <input type="text" value="{todo.item}" onchange="{todo.handleItem}">
        <button type="submit">Tambah</button>
      </form>
      <p>Dear {todo.name}, berikut adalah tugas semasa anda:</p>
      <ul>
        {todo.todos.map ((item) =><li key="{item.id}"> {item.title}</li> )}
      </ul>
    </div>
  );
};

mengeksport todocomponent lalai;

Kemas kini App.js :

 Import bertindak balas daripada 'bertindak balas';
import todocomponent dari "./todo";
import formponent dari "./form";
import {StoreContainer} dari "./Store";

aplikasi fungsi () {
  kembali (
    <storecontainer.provider>
      <formcomponent></formcomponent>
      <todocomponent></todocomponent>
    </storecontainer.provider>
  );
}

aplikasi lalai eksport;

Contoh yang disemak ini memberikan ilustrasi yang lebih lengkap dan berfungsi untuk perkongsian negara merentasi pelbagai komponen menggunakan NEXT-NEXT. Ingatlah untuk mengendalikan kesilapan dan kes kelebihan dalam persekitaran pengeluaran.

Atas ialah kandungan terperinci Menguruskan Negeri dalam React Menggunakan Next-Next. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!