Como hacerle debug a Redux en React Native
Tags: spanish, react, redux, reactnative
Published: 2021-02-15 23:31:44

> Nota: Puedes leer este articulo en ingles, haciendo [click aqui](https://dev.to/piscespieces/how-to-debug-redux-in-a-react-native-app-4b19)

Despues de mucho `s u f r i r` tratando de entender como estas _dev tools_ trabajan en conjunto para hacerle _debug_ a la primera aplicacion en React Native que me han asignado, llegue a estar tan estresado por no ser capaz de saber que se encontraba dentro de mi *Redux Store State* que decidi documentar la solucion que me funciono.

_Despues de todo no fue tan complicado, solamente que la documentacion no era lo suficientemente clara para mi..._

> No voy a explicar los fundamentos de como instalar y configurar un _Redux Store_ con sus _middlewares_, pero puede seguir este articulo si necesitas aprender como hacerlo.

Dicho esto...

En este blog voy a ensenarte __como hacerle debug a una aplicacion en React Native__ utilizando la extension de Chrome: __Redux DevTools Extension.__

## Instalando las dependencias necesarias

Vamos a instalar las siguientes dependencias:

1. **React-native-debugger**:
  Esta es una standalone app que vamos a instalar utilizando **brew**. Abre tu terminal y corre el siguiente comando:

  ```brew install --cask react-native-debugger```

2.  **Redux DevTools Chrome Extension `&&` redux-devtools-extension**
  Esta es una herramienta que vas a necesitar instalar como una extension de Chrome en tu navegador Google Chrome y tambien como una dependencia en tu proyecto.

  Primero, ve hacia el **Chrome Web Store** e instala [Redux DevTools](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en).
  Ahora, finalmente dirigete hacia el _root_ de tu proyecto para instalar las dependencias siguientes:

  ```npm install redux-devtools-extension```
  ```npm install remote-redux-devtools```

Una vez finalizada la instalacion de estos paquetes, veamos el archivo donde hemos configurado previamente nuestro _Redux Store_, comunmente llamado `configureStore.js` o `store.js`.

## Configurando nuestro __R e d u x S t o r e__

Si no estas utilizando _middleware and enhancers_ entonces tu _Redux Store_ deberia verse mas o menos como esto:

```
// configureStore.js

import { createStore, applyMiddleware, compose } from 'redux’;

const store = createStore(reducer, compose(
  applyMiddleware(...middleware),
  // other store enhancers if any
));
```
Si, por el contrario, estas utilizando un _middleware and enhancers_ como [`redux-thunk`](https://github.com/reduxjs/redux-thunk), o alguno similar: Utilicemos el modulo `composeWithDevTools` que proviene del paquete [`redux-devtools-extension`](https://www.npmjs.com/package/redux-devtools-extension), y nuestro _store_ se veria algo asi:

```
// configureStore.js

import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'remote-redux-devtools';

const store = createStore(
    reducer,
    composeWithDevTools(applyMiddleware(...middleware),
  // other store enhancers if any
));
```

En el primer ejemplo no fue necesario utilizar el modulo `composeWithDevTools`. Esa es la unica diferencia entre los dos _snippets_ de codigo. Asegurate solamente de que estas utilizando la manera correcta para tu proyecto.

## Corriendo la herramienta [`React Native Debugger`](https://github.com/jhen0409/react-native-debugger)

Hay dos maneras de acceder al **React Native Debugger**, y las dos son bastante parecidas, es solo cuestion de cual prefieres:

1. **React Native Debugger** corre por defecto en el puerto local `8081`, asi que puedes simplemente abrir tu terminal y correr el siguiente comando:

  ```open “rndebugger://set-debugger-loc?host=localhost&port=8081”```

  o

2. Dirigete hacia el directorio _root_ de tu proyecto y abre el `package.json`. En la seccion de `"scripts"` agrega lo siguiente:

  ```
  ”debug": "open 'rndebugger://set-debugger-loc?host=localhost&port=8081’”
  ```

  Ahora, el `package.json` deberia lucir mas o menos asi:

  ```
  "scripts": {
      "android": "react-native run-android",
      "ios": "react-native run-ios",
      "start": "react-native start",
      "test": "jest",
      "lint": "eslint .",
      "debug": "open 'rndebugger://set-debugger-loc?host=localhost&port=8081'"
    }
  ```

  Luego, hecho esto, en tu directorio _root_ corre el siguiente comando:

  ```npm run debug```

  Esto deberia abrir la ventana de **React Native Debugger**.

  ![React Native Debugger window](https://dev-to-uploads.s3.amazonaws.com/i/hl3noi25z9xlwawz6bhh.png)

  ## Acceso al Developer Menu

  Una vez lanzado el **React Native Debugger**, dirigete hacia tu el editor de texto donde tienes tu proyecto y lanza tu aplicacion en el simulador de dispositivo, en mi caso:

Para iOS

```
npm run ios
```

Para Android

```
npm run android
```

Una vez abierto, utilizando el _shortcut_ `cmd+d` en el simulador de iOS, `cmd+m` si estas utilizando el simulador de Android. El _Developer Menu_ deberia abrir. Selecciona la opcion **Debug**.

  Y _Voilà_!

  Esto deberia conectar tu **RNDebugger** con tu aplicacion. Ahora tienes la posibilidad de hacerle a tu aplicacion utilizando el _Chrome DevTools_ pero tambien la razon por la que viniste aqui, para chequear y saber que hay en tu *Redux Store*.

> PD: Let's connect on Twitter! [@dev_astador](https://twitter.com/dev_astador)