Maison >interface Web >js tutoriel >Gestion des données avec Redux : stockage du contenu et des identifiants dans des tranches
Redux est une bibliothèque de gestion d'état populaire pour les applications JavaScript, en particulier celles construites avec des frameworks comme React. L'un des concepts fondamentaux de Redux est l'idée d'un magasin centralisé contenant l'état de votre application. Cet article explique comment gérer efficacement les données à l'aide de Redux en séparant le stockage de contenu de la gestion des listes grâce à l'utilisation de tranches.
Dans Redux, une tranche est un ensemble de logiques et d'actions réductrices pour une fonctionnalité ou un domaine spécifique de votre application. L'utilisation de tranches permet d'organiser votre état de manière logique, ce qui facilite la gestion et la mise à l'échelle de votre application. Par exemple, vous pouvez avoir des tranches distinctes pour les données utilisateur, les publications, les commentaires et toute autre entité dans votre application.
Dans Redux, les tranches aident à structurer efficacement votre état. Lors de la gestion d'une application de blog, vous pouvez séparer le stockage du contenu des publications des listes d'identifiants de publication. Cette séparation permet un rendu et une mise à jour efficaces des données.
Pour gérer efficacement à la fois le contenu de vos publications et les listes qui référencent ces publications, nous pouvons structurer notre état Redux en deux parties :
Une structure simple pour gérer les publications :
{ "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"] } }
Dans cet exemple, la tranche de publications se compose de :
Créez une tranche pour gérer les publications :
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); } } });
Récupérez les publications dans vos composants :
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]));
Cette approche vous permet de séparer le stockage de contenu et la gestion des identifiants, ce qui facilite la maintenance et l'accès à l'état de votre application avec Redux.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!