Cómo utilizar RTK Query y Redux Thunk en la misma aplicación de React?

05 Aug, 2023 Programación 0

Tengo un requisito en el que debo usar RTK Query para la recuperación de datos y Redux-thunk para la administración del estado global. Para esto, he creado 2 almacenes separados, uno para RTK y otro para Redux. Ahora estoy enfrentando un problema ya que no deberíamos tener 2 almacenes en nuestra aplicación.

Almacén 1:

import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import combineReducer from './combineReducer';

export const configureStore = () : any => {
  const middleWares = [thunk];
  const middlewareEnhancer = applyMiddleware(...middleWares);

  const enhancers = [middlewareEnhancer];
  const composedEnhancers: any = compose(...enhancers);

  const store = createStore(combineReducer, composedEnhancers);

  return store;
};

Almacén 2:

import { configureStore } from "@reduxjs/toolkit";
import { setupListeners } from "@reduxjs/toolkit/query";
import { postApi } from "../services/posts";

export const store = configureStore({
  reducer: {
    [postApi.reducerPath]: postApi.reducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(postApi.middleware),
});

setupListeners(store.dispatch);

App.tsx:

“`
const App: React.FC = () => (

Loading…

);

Estoy seguro de que hay algo sospechoso en esto. Cualquier solución para el requisito sería apreciable.

davy.ai

August 5, 2023 at 1:10 am

Deberías tener solo una tienda en tu aplicación. Para cumplir con el requisito de utilizar tanto RTK query para la obtención de datos como Redux-thunk para la gestión de estado global, puedes integrarlos juntos. Para hacer esto, puedes aprovechar el middleware redux-thunk que viene con RTK.

Puedes definir tu tienda de la siguiente manera:

import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit';
import { createAsyncThunk } from '@reduxjs/toolkit/query';
import combineReducer from './combineReducer';

const fetchUsers = createAsyncThunk('users/fetchAll', async () => {
  const response = await fetch('/api/users');
  const data = await response.json();
  return data;
});

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

Aquí, estamos utilizando el método createAsyncThunk de RTK para definir un creador de acciones diff para la obtención de usuarios, y adjuntando el middleware proporcionado por fetchUsers.middleware. También hemos combinado todos los reducers mediante el método combineReducer.

Ahora, puedes utilizar el creador de acciones fetchUsers en tus componentes para obtener datos y tener el estado global gestionado por una sola tienda. Por ejemplo:

import { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { fetchUsers } from './store';

function App() {
  const dispatch = useDispatch();
  const users = useSelector((state) => state.users);

  useEffect(() => {
    dispatch(fetchUsers());
  }, [dispatch]);

  if (users.loading) {
    return <div>Cargando...</div>;
  }

  if (users.error) {
    return <div>Error: {users.error.message}</div>;
  }

  return (
    <ul>
      {users.data.map((user) => (
        <li key="{user.id}">{user.name}</li>
      ))}
    </ul>
  );
}

Aquí, estamos utilizando el gancho useSelector para seleccionar el estado users de la tienda, y el gancho useDispatch para despachar la acción fetchUsers cuando el componente se monta. El componente renderizará el estado de carga si users.loading es verdadero y el estado de error si users.error es verdadero. De lo contrario, renderizará la lista de usuarios obtenidos desde la API.

Al integrar RTK query y Redux-thunk de esta manera, puedes tener una sola tienda para gestionar tanto el estado local como el remoto.

Answer

davy.ai

August 5, 2023 at 1:10 am
Deberías tener solo una tienda en tu aplicación. Para cumplir con el requisito de utilizar tanto RTK query para la obtención de datos como Redux-thunk para la gestión de estado global, puedes integrarlos juntos. Para hacer esto, puedes aprovechar el middleware redux-thunk que viene con RTK.

Puedes definir tu tienda de la siguiente manera:
```
import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit';
import { createAsyncThunk } from '@reduxjs/toolkit/query';
import combineReducer from './combineReducer';

const fetchUsers = createAsyncThunk('users/fetchAll', async () => {
  const response = await fetch('/api/users');
  const data = await response.json();
  return data;
});

export const store = configureStore({
  reducer: combineReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(fetchUsers.middleware)
});
```
Aquí, estamos utilizando el método createAsyncThunk de RTK para definir un creador de acciones diff para la obtención de usuarios, y adjuntando el middleware proporcionado por fetchUsers.middleware. También hemos combinado todos los reducers mediante el método combineReducer.

Ahora, puedes utilizar el creador de acciones fetchUsers en tus componentes para obtener datos y tener el estado global gestionado por una sola tienda. Por ejemplo:
```
import { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { fetchUsers } from './store';

function App() {
  const dispatch = useDispatch();
  const users = useSelector((state) => state.users);

  useEffect(() => {
    dispatch(fetchUsers());
  }, [dispatch]);

  if (users.loading) {
    return <div>Cargando...</div>;
  }

  if (users.error) {
    return <div>Error: {users.error.message}</div>;
  }

  return (
    <ul>
      {users.data.map((user) => (
        <li key="{user.id}">{user.name}</li>
      ))}
    </ul>
  );
}
```
Aquí, estamos utilizando el gancho useSelector para seleccionar el estado users de la tienda, y el gancho useDispatch para despachar la acción fetchUsers cuando el componente se monta. El componente renderizará el estado de carga si users.loading es verdadero y el estado de error si users.error es verdadero. De lo contrario, renderizará la lista de usuarios obtenidos desde la API.

Al integrar RTK query y Redux-thunk de esta manera, puedes tener una sola tienda para gestionar tanto el estado local como el remoto.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Cómo utilizar RTK Query y Redux Thunk en la misma aplicación de React?

Answer

davy.ai