Kuasai Redux dengan asy Steps: Panduan Komprehensif untuk Redux Toolkit

Dalam dunia pembangunan React, mengurus keadaan secara berkesan adalah penting untuk membina aplikasi yang mantap. Redux telah lama menjadi pilihan yang popular untuk pengurusan negeri, tetapi kerumitannya boleh menjadi menakutkan bagi pendatang baru. Masukkan Redux Toolkit, alat berkuasa yang memudahkan proses menggunakan Redux. Dalam blog ini, kami akan meneroka apa itu Redux Toolkit, sebab anda perlu menggunakannya dan cara menguasainya dalam hanya lima langkah mudah.

Apakah Redux?

Redux ialah bekas keadaan yang boleh diramal untuk aplikasi JavaScript. Ia membolehkan pembangun mengurus keadaan aplikasi dalam satu kedai, menjadikannya lebih mudah untuk menjejaki perubahan dari semasa ke semasa. Redux mengikut tiga prinsip asas:

1. Sumber Tunggal Kebenaran: Keseluruhan keadaan aplikasi disimpan dalam satu pokok objek dalam stor.
2. Negeri ialah Baca Sahaja: Satu-satunya cara untuk menukar keadaan adalah dengan menghantar tindakan, yang merupakan objek biasa yang menerangkan perkara yang berlaku.
3. Perubahan Dibuat dengan Fungsi Tulen: Untuk menentukan cara keadaan berubah sebagai tindak balas kepada tindakan, anda menulis pengurangan tulen.

Walaupun Redux memberikan kelebihan ketara untuk menguruskan keadaan kompleks, ia selalunya memerlukan banyak kod dan konfigurasi plat dandang. Di sinilah Redux Toolkit dimainkan.

Apakah Redux Toolkit?

Redux Toolkit adalah seperti kotak alat ajaib untuk Redux. Ia menyelaraskan proses menulis kod Redux dengan menyediakan satu set alat dan amalan terbaik yang membantu pembangun mencipta aplikasi yang cekap dan boleh diselenggara dengan lebih pantas dan kurang kekecohan. Ciri utama Redux Toolkit termasuk:

• Persediaan Kedai Ringkas: Ia mengurangkan kerumitan mengkonfigurasi kedai dan perisian tengah.
• Amalan Terbaik Terbina dalam: Menggalakkan amalan terbaik untuk menulis logik Redux, mengurangkan kod boilerplate.
• Pengambilan Data Berkuasa: Termasuk Pertanyaan RTK untuk pengambilan data dan caching yang cekap.

Mengapa Menggunakan Redux Toolkit?

Redux Toolkit amat berguna untuk menguruskan keadaan kompleks dalam aplikasi React. Berikut ialah beberapa senario di mana ia bersinar:

• Pengesahan Pengguna: Urus sesi pengguna dan keadaan pengesahan dengan berkesan.
• Caching Respons API: Simpan respons API untuk meminimumkan permintaan rangkaian yang tidak diperlukan.
• Menyegerakkan Keadaan Apl Global: Pastikan keadaan global disegerakkan merentas komponen berbeza dengan lancar.

Dengan ciri terbina dalam dan API yang dipermudahkan, Redux Toolkit menjadikannya lebih mudah untuk mengendalikan kes penggunaan biasa dalam aplikasi web moden.

Bermula dengan Redux Toolkit

Untuk bermula dengan Redux Toolkit, ikut lima langkah mudah ini:

Langkah 1: Pasang Redux Toolkit

Pertama sekali, anda perlu memasang Redux Toolkit bersama-sama dengan React-Redux, yang menyediakan pengikatan untuk menyepadukan React dengan Redux.

npm install @reduxjs/toolkit react-redux

Arahan ini memasang kedua-dua pakej, membolehkan anda memanfaatkan kuasa penuh Redux Toolkit dalam aplikasi React anda.

Langkah 2: Buat Kedai

Seterusnya, anda akan menyediakan kedai Redux. Kedai bertindak sebagai kotak besar tempat data aplikasi anda hidup. Dengan Redux Toolkit, mencipta kedai adalah mudah:

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';

const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

export default store;

Dalam contoh ini, kami mengimport configureStore daripada Redux Toolkit dan mencipta kedai yang termasuk pengurangan hirisan kaunter.

Langkah 3: Buat Slice

Hirisan seperti kepingan kek dalam Redux Toolkit! Ia mewakili cebisan kecil data aplikasi anda bersama-sama dengan tindakan yang mengubah suai data tersebut. Begini cara membuat kepingan:

import { createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: 0,
  reducers: {
    increment: (state) => state + 1,
    decrement: (state) => state - 1,
  },
});

export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;

Dalam coretan kod ini, kami mentakrifkan CounterSlice dengan keadaan awal 0 dan dua pengurang (kenaikan dan penurunan) yang mengubah suai keadaan.

Langkah 4: Balut Apl Anda dengan Pembekal

Untuk menggunakan Redux Toolkit dalam aplikasi React anda, anda perlu menyediakan gedung Redux kepada komponen apl anda. Anda melakukan ini dengan membalut komponen aplikasi utama anda dengan komponen daripada react-redux:

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './App';
import store from './store';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

Persediaan ini memastikan semua komponen dalam apl anda boleh mengakses gedung Redux.

Langkah 5: Hantar Tindakan dan Gunakan Pemilih

Sekarang kedai anda disediakan dan diberikan kepada aplikasi anda, anda boleh menghantar tindakan dan mendapatkan semula data menggunakan pemilih.

Tindakan Penghantaran

Tindakan adalah seperti utusan yang memberitahu Redux apa yang perlu dilakukan. Dengan Redux Toolkit, menghantar tindakan adalah mudah:

import { useDispatch } from 'react-redux';
import { increment, decrement } from './counterSlice';

function CounterComponent() {
  const dispatch = useDispatch();

  return (
    <div>
      <button onClick={() => dispatch(increment())}>Add 1</button>
      <button onClick={() => dispatch(decrement())}>Subtract 1</button>
    </div>
  );
}

Dalam komponen ini, kami menggunakan cangkuk useDispatch untuk mengakses fungsi penghantaran dan menghantar tindakan apabila butang diklik.

Menggunakan Pemilih

Untuk membaca nilai dari kedai Redux anda, anda boleh menggunakan cangkuk useSelector:

import { useSelector } from 'react-redux';

function CounterDisplay() {
  const counter = useSelector((state) => state.counter);

  return <div>Count: {counter}</div>;
}

Di sini, kami mendapatkan semula nilai semasa kaunter daripada kedai menggunakan useSelector.

Kesimpulan

Menguasai Redux dengan lima langkah mudah ini memberi anda kuasa untuk mengurus keadaan kompleks dalam aplikasi React anda dengan berkesan. Dengan memanfaatkan Redux Toolkit, anda boleh menulis kod yang lebih bersih dengan kurang plat dandang sambil mematuhi amalan terbaik.

Sama ada anda mengendalikan pengesahan pengguna atau menyegerakkan keadaan apl global, Redux Toolkit menyediakan penyelesaian yang boleh dipercayai yang menyelaraskan proses pembangunan anda. Dengan API intuitif dan ciri terbina dalam seperti RTK Query untuk pengambilan data dan caching, anda akan mendapati diri anda membina aplikasi yang mantap lebih pantas berbanding sebelum ini.

Sambil anda meneruskan perjalanan anda dengan React dan Redux Toolkit, pertimbangkan untuk meneroka topik yang lebih lanjutan seperti penyepaduan perisian tengah, pengendalian tindakan tak segerak dengan thunks atau saga dan mengoptimumkan prestasi dengan teknik hafalan. Selamat mengekod!

Petikan:
[1] https://redux.js.org/introduction/installation
[2] https://redux.js.org/tutorials/quick-start
[3] https://www.freecodecamp.org/news/redux-and-redux-toolkit-for-beginners/
[4] https://redux-toolkit.js.org/usage/usage-guide
[5] https://redux-toolkit.js.org/usage/nextjs
[6] https://redux-toolkit.js.org/introduction/getting-started
[7] https://dev.to/raaynaldo/redux-toolkit-setup-tutorial-5fjf
[8] https://redux-toolkit.js.org/tutorials/typescript

Atas ialah kandungan terperinci Kuasai Redux dengan asy Steps: Panduan Komprehensif untuk Redux Toolkit. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!