Início / coding / Perguntas / 79541696
Accepted
user101289
Asked: 2025-03-28 22:28:07 +0800 CST

Mutação de consulta RTK com seletor

  • 772

Eu uso redux toolkithá alguns anos e estou bem familiarizado com ele. Estou passando e tentando atualizar o código antigo usando a RTK Queryestratégia mais nova para substituir alguns dos meus antigos slicese thunks.

Se entendi a documentação corretamente, parece que o RTK Query foi criado para substituir amplamente a maneira antiga de fazer as coisas e, em vez de manter o estado "manualmente" em seus slices, você deixa o RTK Query cuidar do gerenciamento/armazenamento em cache e apenas solicita novamente os dados do slice da API que foi definido pelo RTK Query, e ele faz o resto automaticamente.

Supondo que isso esteja correto, como você seleciona dados que foram adicionados ao cache por uma mutação?

Especificamente, estou usando uma mutação para autenticar um usuário (este é o cenário de teste mais simples, então não há realmente nenhuma autenticação, nenhum token, etc.)

Parece que:

    loginUser: builder.mutation<UserServiceResult, UserCredentials>({
        query: ({ userName, password }) => ({
            url: '/authenticate',
            method: 'POST',
            body: { UserName: userName, Password: password },
        }),
    }),

No formulário de login, isso é usado assim:

    const [loginUser, { isLoading: isUpdating }] = useLoginUserMutation();
    loginUser(credentials).unwrap().then((userServiceResult) => {
        if (userServiceResult.isSuccessful) {
            console.log("Successfully logged in", userServiceResult);
            toast.success("User authenticated.", {position: "top-right"});
        } else {
            toast.error("User authentication failed.", {position: "top-right"});
        }
    })

Tudo isso está funcionando bem. Mas o layout principal está usando um seletor redux para verificar se o usuário existe na loja para mostrar o menu "logado" vs. o menu "convidado". Parece com isso:

const user = useAppSelector(selectUser); // then do stuff if user is not null

Qual é a estratégia para manter os dados contidos nas mutações da API?

insira a descrição da imagem aqui

javascript

1 respostas

  1. Best Answer

    Suspeito que você poderia usar uma chave de cache fixa para compartilhar resultados de mutação entre instâncias de hook. Veja Shared Mutation Results para detalhes.

    No componente que faz o login, forneça uma chave de cache fixa para a mutação.

    const [loginUser, { isLoading: isUpdating }] = useLoginUserMutation({
  fixedCacheKey: "authenticated-user",
});

...

loginUser(credentials).unwrap()
  .then(....)

    Chame o useLoginUserMutationno componente de destino e forneça a mesma chave de cache fixa e esse componente poderá acessar os dados armazenados em cache.

    const [, { data: user }] = useLoginUserMutation({
  fixedCacheKey: "authenticated-user",
});

...

user?.results?.[0] // { id: "f9a41496-f...", role: 0, userName: "admin", ... }
    • 1

relate perguntas