Mengurus Data dengan Redux: Menyimpan Kandungan dan ID dalam Slices

Redux ialah perpustakaan pengurusan negeri yang popular untuk aplikasi JavaScript, terutamanya yang dibina dengan rangka kerja seperti React. Salah satu konsep teras Redux ialah idea kedai berpusat yang memegang keadaan aplikasi anda. Artikel ini meneroka cara mengurus data dengan berkesan menggunakan Redux dengan mengasingkan storan kandungan daripada pengurusan senarai melalui penggunaan kepingan.

Memahami Redux Slices

Dalam Redux, slice ialah himpunan logik pengurang dan tindakan untuk ciri atau domain khusus aplikasi anda. Menggunakan kepingan membantu menyusun keadaan anda secara logik, menjadikannya lebih mudah untuk mengurus dan menskalakan aplikasi anda. Contohnya, anda boleh mempunyai kepingan berasingan untuk data pengguna, siaran, ulasan dan mana-mana entiti lain dalam aplikasi anda.

Gambaran Keseluruhan Konsep

Dalam Redux, kepingan membantu menstruktur keadaan anda dengan berkesan. Apabila mengurus aplikasi blog, anda boleh memisahkan storan kandungan siaran daripada senarai ID siaran. Pemisahan ini membolehkan pemaparan dan pengemaskinian data yang cekap.

Menstruktur Negeri Anda

Untuk mengurus kedua-dua kandungan siaran anda dan senarai yang merujuk siaran ini dengan berkesan, kami boleh menstrukturkan keadaan Redux kami kepada dua bahagian:

1. Sekian Catatan: Potongan ini akan menyimpan kandungan sebenar siaran anda.
2. Slice ID: Potongan ini akan mengurus ID siaran, yang boleh digunakan untuk pelbagai senarai seperti semua siaran dan siaran terbaharu.

Struktur Negeri

Struktur mudah untuk menguruskan siaran:

{
  "posts": {
    "byId": {
      "1": { "id": "1", "title": "First Post", "content": "This is the first post." },
      "2": { "id": "2", "title": "Second Post", "content": "This is the second post." }
    },
    "allIds": ["1", "2"],
    "recentIds": ["2"]
  }
}

Dalam contoh ini, kepingan catatan terdiri daripada:

• byId: ID pos yang memetakan objek kepada kandungan masing-masing.
• allIds: Tatasusunan yang mengandungi ID semua siaran, berguna untuk memaparkan halaman "Semua Catatan".
• recentIds: Tatasusunan yang mengandungi ID siaran terbaharu, berguna untuk blok "Catatan Terbaharu".

Persediaan Potong

Buat kepingan untuk mengurus siaran:

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

const postsSlice = createSlice({
  name: 'posts',
  initialState: { byId: {}, allIds: [], recentIds: [] },
  reducers: {
    addPost: (state, { payload }) => {
      state.byId[payload.id] = payload;
      state.allIds.push(payload.id);
      state.recentIds.push(payload.id);
    },
    removePost: (state, { payload }) => {
      delete state.byId[payload];
      state.allIds = state.allIds.filter(id => id !== payload);
      state.recentIds = state.recentIds.filter(id => id !== payload);
    }
  }
});

Mengakses Data

Dapatkan semula siaran dalam komponen anda:

const allPosts = useSelector(state => state.posts.allIds.map(id => state.posts.byId[id]));
const recentPosts = useSelector(state => state.posts.recentIds.map(id => state.posts.byId[id]));

Faedah Pendekatan Ini

• Pengasingan Kebimbangan: Mengasingkan kandungan dan senarai ID membantu mengurus data dengan lebih berkesan, terutamanya apabila aplikasi berskala.
• Kecekapan: Dengan mengurus ID secara berasingan, anda boleh mengemas kini atau memaparkan senarai dengan mudah tanpa perlu memanipulasi keseluruhan set data.
• Fleksibiliti: Anda boleh mengubah suai cara anda memaparkan data dengan mudah dengan hanya menukar ID dalam senarai anda tanpa mengubah kandungan asas.

Pendekatan ini membolehkan anda memisahkan storan kandungan dan pengurusan ID, menjadikannya lebih mudah untuk mengekalkan dan mengakses keadaan aplikasi anda dengan Redux.

Atas ialah kandungan terperinci Mengurus Data dengan Redux: Menyimpan Kandungan dan ID dalam Slices. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!