Menguasai Redux Toolkit: Permudahkan Pengurusan Negeri dalam Apl React Anda

Redux Toolkit: Memudahkan Pengurusan Negeri dalam React

Redux Toolkit ialah perpustakaan rasmi, berpendirian dan berkuasa yang memudahkan proses menyediakan Redux dalam aplikasi anda. Redux, walaupun sangat berkuasa, boleh memerlukan banyak kod boilerplate untuk mengendalikan pengurusan negeri, penciptaan tindakan dan pengurang. Redux Toolkit (RTK) direka untuk menjadikan pembangunan Redux lebih mudah dan cekap dengan menyediakan satu set fungsi utiliti yang memudahkan tugas biasa.

Dengan Redux Toolkit, anda boleh mengkonfigurasi stor, menulis pengurang dan mentakrifkan tindakan dengan cara yang lebih ringkas dan teratur. Ia juga termasuk beberapa tetapan lalai yang membantu pembangun mengelakkan kesilapan biasa dan kod plat dandang.

---

1. Apakah Redux Toolkit?

Redux Toolkit ialah perpustakaan rasmi yang disyorkan untuk menulis logik Redux dengan cara yang lebih berstruktur, ringkas dan mesra pengguna. Ia membantu menghapuskan keperluan untuk kod berulang dengan menyediakan utiliti yang mengurangkan kerumitan persediaan Redux, seperti mengendalikan kemas kini keadaan tidak berubah secara automatik dan memudahkan pencipta dan pengurang tindakan.

---

2. Ciri Teras Redux Toolkit

Kit Alat Redux menyediakan beberapa ciri dan utiliti terbina dalam untuk menyelaraskan penggunaan Redux:

1. configureStor

configure Store memudahkan konfigurasi kedai dengan menambahkan perisian tengah penting secara automatik seperti redux-thunk untuk tindakan async dan menyediakan Redux DevTools untuk nyahpepijat.

Contoh:

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

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

export default store;

• configureStore mengendalikan penciptaan kedai, menjadikannya lebih mudah dan lebih standard berbanding dengan fungsi createStore.

2. createSlice

createSlice ialah utiliti yang memudahkan penciptaan kepingan Redux, yang mewakili sekeping keadaan Redux dan termasuk kedua-dua pengurang dan tindakan.

Contoh:

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

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => {
      state.value += 1; // Direct mutation allowed due to immer.js under the hood
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload;
    }
  }
});

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

• createSlice secara automatik menjana pencipta tindakan dan jenis tindakan berdasarkan fungsi pengurang yang anda tentukan.

3. createAsyncThunk

createAsyncThunk ialah alat untuk mengendalikan logik tak segerak, seperti mengambil data daripada API dan menyepadukannya ke dalam keadaan Redux anda. Ia menjana satu set pencipta tindakan (keadaan belum selesai, dipenuhi dan ditolak) untuk mengurus aliran async.

Contoh:

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

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

export default store;

• createAsyncThunk membantu mengurus permintaan tak segerak dalam Redux dengan cara yang bersih dan mudah difahami.

4. createEntityAdapter

createEntityAdapter ialah utiliti untuk mengurus data ternormal dalam Redux. Ia membantu anda mengendalikan pengumpulan data, seperti senarai item, dengan cekap.

Contoh:

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

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => {
      state.value += 1; // Direct mutation allowed due to immer.js under the hood
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload;
    }
  }
});

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

• createEntityAdapter memudahkan kerja dengan koleksi data (seperti senarai atau tatasusunan), membolehkan pengurusan entiti yang lebih mudah seperti menambah, mengemas kini atau memadam data.

---

3. Kelebihan Redux Toolkit

1. Kurang Boilerplate

RTK mengurangkan dengan ketara jumlah kod boilerplate yang diperlukan untuk menyediakan Redux. Daripada menulis jenis tindakan, pencipta tindakan dan pengurang secara manual, anda kini boleh menggunakan createSlice untuk menjana semuanya secara automatik.

2. Kemas Kini Tidak Berubah (melalui Immer.js)

RTK menggunakan Immer.js di bawah hud, yang membolehkan anda menulis kod "mutatif" dalam pengurang anda. Walau bagaimanapun, Immer memastikan bahawa keadaan kekal tidak berubah dengan membuat salinan keadaan secara automatik dan menggunakan mutasi padanya.

3. Pengalaman Pembangun yang Lebih Baik

Dengan mengkonfigurasi perisian tengah secara automatik seperti redux-thunk dan menyepadukan dengan Redux DevTools, Redux Toolkit memudahkan untuk nyahpepijat dan memantau keadaan Redux anda. Anda juga boleh menggunakan alatan seperti TypeScript dengan mudah, kerana RTK menyediakan sokongan hebat untuk keselamatan jenis.

4. Logik Async Dipermudahkan

Fungsi createAsyncThunk membantu mengurus logik tak segerak yang kompleks dan menyepadukannya dengan lancar ke dalam keadaan Redux anda, mengurangkan kerumitan mengurus operasi async.

5. Normalkan Data dengan createEntityAdapter

RTK menyediakan utiliti seperti createEntityAdapter untuk mengendalikan data ternormal. Ini amat berguna untuk mengurus set data yang besar (cth., senarai pengguna, produk, dll.) dalam Redux.

---

4. Menyediakan Redux Toolkit dalam Apl React

Berikut ialah panduan asas untuk menyediakan Redux Toolkit dalam apl React.

Langkah 1: Pasang Redux Toolkit dan React-Redux

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

export const fetchData = createAsyncThunk(
  'data/fetchData', 
  async (url) => {
    const response = await fetch(url);
    return response.json();
  }
);

const dataSlice = createSlice({
  name: 'data',
  initialState: { items: [], status: 'idle' },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchData.pending, (state) => {
        state.status = 'loading';
      })
      .addCase(fetchData.fulfilled, (state, action) => {
        state.status = 'succeeded';
        state.items = action.payload;
      })
      .addCase(fetchData.rejected, (state) => {
        state.status = 'failed';
      });
  }
});

export default dataSlice.reducer;

Langkah 2: Buat Slices dan Reducer

Gunakan createSlice untuk menentukan kepingan Redux anda, yang akan mengandungi kedua-dua tindakan dan pengurang untuk bahagian keadaan tertentu.

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

const usersAdapter = createEntityAdapter();

const usersSlice = createSlice({
  name: 'users',
  initialState: usersAdapter.getInitialState(),
  reducers: {
    addUser: usersAdapter.addOne,
    removeUser: usersAdapter.removeOne,
  }
});

export const { addUser, removeUser } = usersSlice.actions;
export default usersSlice.reducer;

Langkah 3: Konfigurasikan Kedai

Seterusnya, konfigurasikan gedung Redux dengan configureStore.

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

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

export default store;

Langkah 4: Gunakan Redux dalam Komponen React

Balut apl anda dengan komponen Pembekal daripada react-redux untuk menjadikan kedai Redux tersedia di seluruh aplikasi anda.

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

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => {
      state.value += 1; // Direct mutation allowed due to immer.js under the hood
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload;
    }
  }
});

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

• useSelector: Mengakses keadaan Redux.
• useDispatch: Menghantar tindakan untuk mengubah suai keadaan.

---

5. Kesimpulan

Redux Toolkit memudahkan proses bekerja dengan Redux dengan mengalih keluar kod boilerplate dan menawarkan fungsi utiliti seperti createSlice, createAsyncThunk dan configureStore. Dengan menggunakan RTK, pembangun boleh menumpukan pada logik teras aplikasi tanpa perlu risau tentang kerumitan konfigurasi Redux.

Dengan RTK, anda boleh mengurus kedua-dua keadaan segerak dan tak segerak dengan cara yang lebih cekap dan boleh diselenggara, menjadikannya pilihan yang bagus untuk aplikasi React yang lebih besar.

---

Atas ialah kandungan terperinci Menguasai Redux Toolkit: Permudahkan Pengurusan Negeri dalam Apl React Anda. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!