Resumen del problema con extraReducers en RTK

En este artículo, abordaremos un problema común que surge al utilizar los extraReducers en una aplicación que emplea Redux Toolkit (RTK) con el propósito de manejar acciones de API.

Problema

El problema radica en que las acciones de extraReducers definidas en un slice no se activan cuando los eventos cambian en la API de RTK. En el ejemplo proporcionado, la acción myApi.endpoints.getData.matchFulfilled no se activa al resolverse exitosamente getData.

Aquí están las configuraciones relevantes:

1. API definida con createApi:

   const myApi = createApi({
    reducerPath: "myApi",
    baseQuery: fetchBaseQuery({ baseUrl: "https://jsonplaceholder.typicode.com" }),
    endpoints: (builder) => ({
      getData: builder.query({
        query: () => "/todos/1",
      }),
    }),
   });

2. Slice definido con createSlice:

   const mySlice = createSlice({
    name: "mySlice",
    initialState: { data: null },
    reducers: {},
    extraReducers: (builder) => {
      builder.addMatcher(
        myApi.endpoints.getData.matchFulfilled,
        (state, action) => {
          state.data = action.payload;
        }
      );
    },
   });

3. Store configurado con configureStore:

   const store = configureStore({
    reducer: {
    },
    middleware: (getDefaultMiddleware) =>
      getDefaultMiddleware().concat(myApi.middleware),
   });

Observación

La acción matchFulfilled no se activa a menos que el slice mySlice se incluya en la lista de reducers del store. Sin embargo, el autor del problema no desea añadir mySlice al store.

Solución

Para poder utilizar el extraReducers sin añadir el slice al store de forma directa, el autor considera alternativas como injectEndpoints o combineReducers. Sin embargo, no es posible combinar reducers directamente de la forma que se muestra en su ejemplo:

const combinedReducers = combineReducers(myApi.reducer, mySlice.reducer);

Recomendaciones

1. Agregar mySlice al Store: La solución más sencilla sigue siendo añadir mySlice al store. Aunque el autor desea evitar esto, es la manera más directa de permitir que los extraReducers escuchen las acciones del API.

2. Utilización de combineReducers: Si se sigue el camino de combinar reducers, es importante recordar que combineReducers requiere un objeto como argumento, donde cada clave representa el nombre del slice y cada valor es el reducer correspondiente. Por lo tanto, la sintaxis debe ser ajustada.

3. Estructura Alternativa: Otra opción sería buscar una solución más estructurada donde el slice pueda ser utilizado como parte de la lógica de la API, aunque esto puede requerir un diseño más profundo de las interacciones entre el slice y el API.

Conclusión

El problema que enfrenta el autor se relaciona con la necesidad de que los extraReducers respondan a las acciones del API de RTK. Aunque se pueden considerar varias soluciones, agregar el slice al store sigue siendo el método más eficaz y recomendado en la documentación de Redux Toolkit.