Pengurusan Negeri dengan RxJS dan React

pengenalan

Membina apl web yang besar boleh menjadi rumit, terutamanya apabila anda mempunyai banyak maklumat yang berbeza untuk dijejaki. Tetapi jangan risau, RxJS sedia membantu! Ia seperti alat yang sangat hebat yang membantu anda mengurus semua data anda di satu tempat.

Dengan RxJS, anda boleh mencipta perkara ini yang dipanggil "strim data" yang boleh digunakan oleh bahagian lain apl anda. Ia seperti sungai besar yang mengalir melalui apl anda, memastikan segala-galanya bersambung dan segerak.

Dalam artikel ini, kami akan menunjukkan kepada anda cara menggunakan RxJS untuk membina apl web yang sangat mudah diurus dan berfungsi dengan baik. Pada penghujung artikel, anda akan tahu cara menggunakan RxJS untuk mengurus semua data anda dan membina apl web yang lebih besar dan lebih baik!

Mengapa RxJS untuk Pengurusan Negeri ?

Hei, adakah anda pernah keliru apabila anda membina apl web yang besar dan anda mempunyai banyak maklumat yang berbeza untuk dijejaki? Di situlah RxJS masuk! Ia seperti perpustakaan yang sangat hebat yang membantu anda mengurus semua data anda di satu tempat.

Dengan RxJS, anda boleh membuat strim data yang boleh digunakan oleh bahagian lain apl anda. Ia seperti sungai yang mengalir melalui apl anda, memastikan segala-galanya bersambung dan segerak.

RxJS juga membantu anda memecahkan apl anda kepada bahagian yang lebih kecil, seperti mempunyai bilik yang berbeza di rumah anda untuk barangan yang berbeza. Dengan cara itu, lebih mudah untuk memastikan segala-galanya teratur dan mencari perkara yang anda perlukan.

Secara keseluruhan, RxJS ialah alat yang hebat untuk mengurus data dalam apl web besar. Sama ada anda sedang membina apl mudah atau apl yang sangat besar, RxJS boleh membantu anda mengawal segala-galanya!

Contoh senarai tugasan

Cara paling mudah untuk menggunakan teknologi baharu atau bukti konsep baharu ialah dengan membuat senarai tugasan.

Kedai:

const subject = new Subject();

const initialState: Task[] = [];

let state = initialState;

export const todoStore = {
  init: () => {
    subject.next(state);
  },
  subscribe: (setState: any) => {
    subject.subscribe(setState);
  },
  addTask: (content: string) => {
    const task = {
      content,
      id: uid(),
      isDone: false,
    };
    state = [...state, task];
    subject.next(state);
  },
  removeTask: (id: string) => {
    const tasks = state.filter((task) => task.id !== id);
    state = tasks;
    subject.next(state);
  },
  completeTask: (id: string) => {
    const tasks = state.map((task) => {
      if (task.id === id) {
        task.isDone = !task.isDone;
      }
      return task;
    });
    state = tasks;
    subject.next(state);
  },
  initialState,
};

Kod ini mentakrifkan kedai mudah untuk menguruskan senarai tugasan menggunakan RxJS. Kedai dilaksanakan menggunakan Subjek dan menyediakan kaedah untuk menambah, mengalih keluar dan menyelesaikan tugasan.

Fungsi init memulakan stor dengan menerbitkan keadaan semasa kepada subjek menggunakan subject.next(state). Fungsi ini biasanya dipanggil apabila apl mula-mula dimuatkan untuk memastikan kedai dikemas kini.

Fungsi langgan membolehkan komponen melanggan perubahan dalam kedai. Apabila kedai dikemas kini, fungsi setState yang diluluskan untuk melanggan akan dipanggil dengan keadaan dikemas kini. Fungsi ini biasanya digunakan oleh komponen yang perlu memaparkan keadaan semasa stor.

Secara keseluruhan, init dan langgan ialah dua fungsi penting dalam kod ini yang membolehkan pembangun mengurus keadaan senarai tugasan menggunakan RxJS.

penggunaan:

Sangat mudah untuk melaksanakan pengurusan negeri seperti ini, cuma lakukan yang ini pada peringkat tertinggi:

const [tasks, setTasks] = useState<Task[]>([]);

  useEffect(() => {
    todoStore.subscribe(setTasks);
    todoStore.init();
  });

Kod ini menggunakan cangkuk React untuk melanggan dan memulakan kedai yang menguruskan senarai tugasan menggunakan RxJS.

Kait useState mencipta pembolehubah keadaan bernama tugas dan fungsi bernama setTasks untuk mengemas kini keadaan itu. Argumen [] yang diluluskan kepada useState menetapkan nilai awal tugasan kepada tatasusunan kosong.

Kait useEffect digunakan untuk melanggan dan memulakan todoStore. Barisan todoStore.subscribe(setTasks) melanggan fungsi setTasks kepada perubahan dalam kedai. Ini bermakna apabila kedai dikemas kini, setTasks akan dipanggil dengan keadaan dikemas kini dan tugasan akan dikemas kini dengan sewajarnya.

Fungsi todoStore.init() memulakan stor dengan menerbitkan keadaan semasa kepada subjek menggunakan subject.next(state).

Kesimpulan

Jadi itu sahaja! Kami telah mempelajari cara menggunakan RxJS dan React untuk membina aplikasi senarai tugasan. Kami menggunakan RxJS untuk mengurus keadaan aplikasi dan React untuk memaparkan keadaan semasa kepada pengguna.

Kami melihat cara RxJS menyediakan set alat yang berkuasa untuk mengurus keadaan, termasuk yang boleh diperhatikan, pengendali dan subjek. Dan kami juga mempelajari cara menggunakan cangkuk React seperti useState dan useEffect untuk mengemas kini keadaan aplikasi dalam masa nyata.

Dengan menggunakan RxJS dan React bersama-sama, kami telah membina apl hebat yang mudah digunakan dan diselenggara. Dan kami telah mempelajari beberapa kemahiran yang sangat berharga yang boleh kami gunakan untuk membina aplikasi web yang lebih hebat pada masa hadapan!

Jika anda rasa artikel itu terlalu kabur, lihat ini:

• Kod Sumber: https://github.com/starneit/rxjs-state-poc
• Demo: https://rxjs-poc.web.app/

Atas ialah kandungan terperinci Pengurusan Negeri dengan RxJS dan React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!