Início / coding / Perguntas / 79562893
Accepted
user101289
Asked: 2025-04-09 03:21:45 +0800 CST

gerenciamento de consulta e armazenamento RTK

  • 772

Entendo que o RTK Query representa uma mudança de pensamento em relação ao gerenciamento de estado/armazenamento do Redux, e o paradigma geral é que você usa o endpoint do RTK Query sempre que precisa de dados e confia nele para gerenciar o cache e o estado em vez de slices/thunks etc.

No entanto, tenho um endpoint (definido como um endpoint de consulta RTK) que extrai dados de tensão de um dispositivo em um sistema de hardware. Quero saber essa tensão em um dado momento, mas também quero manter um histórico para poder desenhar um gráfico mostrando a flutuação da tensão.

Minha ideia é que eu possa interceptar os resultados da consulta na fatia da API de Consulta RTK e usar uma ação de redutor normal para inserir os dados no repositório. No entanto, como a consulta RTK não é um componente, não posso usar um gancho de redutor nela. Ainda acho que deve haver uma maneira da fatia da API de Consulta RTK interagir diretamente com o repositório, mas não encontrei nenhuma documentação sobre isso.

A segunda opção que pensei foi usar um middleware para interceptar a ação de consulta, fazer o que for necessário com os dados e armazená-los. No entanto, os exemplos de middleware que encontrei estão todos relacionados ao uso de ações de fatiamento tradicionais do Redux Toolkit, não de endpoints de consulta RTK, então isso gera erros:

listenerMiddleware.startListening({
    actionCreator: useGetVoltageQuery, /// <-- this is an endpoint in RTK Query API slice, not a slice action
    effect: async (action, listenerApi) => {
        // Run whatever additional side-effect-y logic you want here
        console.log('GOT HERE')

        // Can cancel other running instances
        listenerApi.cancelActiveListeners()

        // Run async logic
        /*const data = await fetchData()

        // Pause until action dispatched or state changed
        if (await listenerApi.condition(matchSomeAction)) {
            // Use the listener API methods to dispatch, get state,
            // unsubscribe the listener, start child tasks, and more
            listenerApi.dispatch(updateVoltage(listenerApi.))
        }*/
    },
})

Existe uma maneira recomendada de manipular dados da consulta RTK e persisti-los no armazenamento, bem como manipular os resultados da consulta no cache RTK normal?

javascript

1 respostas

  1. Best Answer

    Existe uma maneira recomendada de manipular dados da consulta RTK e persisti-los no armazenamento, bem como manipular os resultados da consulta no cache RTK normal?

    Sim, você pode criar uma fatia de estado que define um redutor de caso que corresponde quando uma chamada de ponto de extremidade é atendida.

    Exemplo:

    export const api = createApi({
  reducerPath: "api",
  baseQuery,
  endpoints: (build) => ({
    getVoltage: build.query({
      // ...
    }),
    // ...
  }),
});

    const voltageSlice = createSlice({
  name: "voltage",
  initialState,
  reducers: {
    // ...regular case reducers
  },
  extraReducers: (builder) => {
    builder.addMatcher(
      api.endpoints.getVoltage.matchFulfilled,
      (state, action) => {
        // update the state accordingly
        state.history.push(action.payload);
      }
    );
  },
});

    Uma alternativa é despachar uma ação para a loja quando a getVoltageconsulta for atendida.

    Exemplo:

    export const api = createApi({
  reducerPath: "api",
  baseQuery,
  endpoints: (build) => ({
    getVoltage: build.query({
      // ...
      onQueryStarted: async (arg, queryApi) => {
        const { dispatch, queryFulfilled } = queryApi;
        const { data } = await queryFulfilled;
        dispatch(someStateSlice.addVoltage(data));
      },
    }),
    // ...
  }),
});

    const voltageSlice = createSlice({
  name: "voltageState",
  initialState,
  reducers: {
    // ...regular case reducers
    addVoltage: (state, action) => {
      // update the state accordingly, example
      state.history.push(action.payload);
    },
  },
});
    • 2

relate perguntas