Compreendendo o Atomfamily em Recoil – Comunidade de Dev

Ao criar aplicativos com recuo, muitas vezes você precisa gerenciar o estado que se parece com a aparência, mas é distinguido por algum parâmetro dinâmico – por exemplo, perfis de usuário, mensagens ou notificações que são armazenadas individualmente. Definir um átomo separado para cada caso seria repetitivo e ineficiente. É aqui que o Atomfamily entra em jogo. O que é atomfamily? O Atomfamily é uma fábrica para átomos. Em vez de criar vários átomos manualmente, você pode criar uma função que gera átomos exclusivos com base em um parâmetro. Cada átomo criado pela família se comporta como um átomo normal, mas é identificado pelo parâmetro que você passa. Isso o torna perfeito para estruturas de dados dinâmicas onde você não sabe de antemão quantos átomos precisarão. Sintaxe importação {atomfamily} de “recuo”; const myAtomfamily = atomfamily ({key: “myAtomfamily”, padrão: (param) => {return `Valor padrão para $ {param}`;},}); Digite o modo de saída do modo de tela cheia aqui: tecla → String exclusiva para identificar a família Atom. O padrão → pode ser um valor ou uma função do parâmetro. Exemplo: Perfis de usuário com o Atomfamily Imagine que você está criando um aplicativo onde precisa gerenciar os dados do perfil de vários usuários. Em vez de escrever átomos separados para cada usuário, você pode usar um átomfamily: importar {atomfamily, userEcoilState} de “recuo”; const userprofileatom = atomfamily ({key: “userprofile”, padrão: (userID) => ({id: userID, nome: “”, idade: null,}),}); função userprofile ({userId}) {const [profile, setProfile] = userEcoilState (userprofileatom (userID)); retornar (

); } Digite o modo de saída de tela cheia de tela cheia 👉 Cada UserID gera sua própria instância de Atom, isolada de outros. Benefícios dos átomos dinâmicos do Atomfamily – geram átomos sob demanda com base em parâmetros. Menos caldeira – Evite escrever definições de átomos repetitivos. Estado escopo – Cada átomo é isolado no seu parâmetro, impedindo a mistura acidental de dados. Escalável – perfeito para aplicativos que lidam com listas dinâmicas como Todos, usuários ou mensagens de bate -papo. Exemplo: Notificações com o atomfamily const notificatomAtom = atomfamily ({key: “notificationAtom”, padrão: (id) => ({id, text: “”, leia: false,}),}); // Uso na notificação da função de componente ({id}) {const [notif, setNotif] = userEcoilState (notificationAtom (id)); retornar (

); } Digite o modo de saída de tela cheia de tela cheia Cada notificação obtém seu próprio estado de átomo, gerenciado separadamente. Quando usar o Atomfamily? Você precisa de estado por item (por exemplo, um estado para cada TODO, Usuário ou sala de bate-papo). Você não conhece o número de átomos com antecedência. Você deseja uma abordagem de fábrica para a gestão do estado. ✅ Em resumo, o Atomfamily ajuda você a criar dinamicamente átomos para gerenciamento de estado escalável e flexível – sem duplicar o código para todos os casos.

Fonte