🥍Ionic에서 redux dev tools 사용해보기

🧑 Ionic + Angular +Ngrx

현 회사에서 Ionic 상태관리가 되어있지 않았다. 그리하여 Ionic이 Anuglar에 대한 자료가 많아서 Angular는 상태관리는 어떻게 하는가를 찾아보다, Ngrx를 사용하고 있었다. 하지만 무슨이유인지 크롬 확장자 redux-dev-tools에서 아무것도 보이지 않는다... 그래서 새로운 방법을 찾아보았다.

 

🐶 ionic-remote-devtool 소스를 받자!

https://github.com/somq/ionic4-remote-devtool 에서 git clone 하여 소스를 받자

 

git clone https://github.com/somq/remotedev-server.git

 

다음으로 npm intall를 해주자

😊 Ionic 프로젝트에 remotedev를 설치해주자

npm install --save-dev remotedev

위 설치를 통하여 ionic4-remote-devtool 과 연결하여 볼 수 있다.

 

 

😇 remote-devtools-connection-proxy.ts, remote-devtools-proxy.ts 생성

ionic 프로젝트 app 폴더 밑에 "remote-devtools-connection-proxy.ts,remote-devtools-proxy.ts"를 만들어주자

 

remote-devtools-connection-proxy.ts

import { ReduxDevtoolsExtensionConnection } from '@ngrx/store-devtools/src/extension';

export class RemoteDevToolsConnectionProxy
  implements ReduxDevtoolsExtensionConnection {
  constructor(public remotedev: any, public instanceId: string) {}
    init(state?: any): void {
        //throw new Error('Method not implemented.');
    }
    error(anyErr: any): void {
        //throw new Error('Method not implemented.');
    }

  subscribe(listener: (change: any) => void): any {
    const listenerWrapper = (change: any) => {
      listener(change);
    };

    this.remotedev.subscribe(listenerWrapper);
    // Hack fix for commit/time-travelling etc. if the devtools are already open
    setTimeout(() => listenerWrapper({ type: 'START' }));
  }

  unsubscribe(): any {
    // HACK fix bug in @ngrx/store-devtools that calls this instead of returning
    // a lambda that calls it when their Observable wrapper is unsubscribed.
    return () => this.remotedev.unsubscribe(this.instanceId);
  }

  send(action: any, state: any): any {
    // Never called
  }
}

remote-devtools-proxy.ts

import { ReduxDevtoolsExtension, ReduxDevtoolsExtensionConnection, ReduxDevtoolsExtensionConfig } from '@ngrx/store-devtools/src/extension';
import { RemoteDevToolsConnectionProxy } from './remote-devtools-connection-proxy'
import { connect } from 'remotedev/lib/devTools';

export class RemoteDevToolsProxy implements ReduxDevtoolsExtension {
    remotedev: any = null;
    defaultOptions = {
        realtime: true,
        // Needs to match what you run `remotedev` command with and 
        // what you setup in remote devtools local connection settings
        hostname: 'localhost',
        port: 8000,
        autoReconnect: true,
        connectTimeout: 20000,
        ackTimeout: 10000,
        secure: true
    };

    constructor(defaultOptions: Object) {
        this.defaultOptions = Object.assign(this.defaultOptions, defaultOptions);
    }
    

    connect(options: ReduxDevtoolsExtensionConfig): ReduxDevtoolsExtensionConnection {
      const connectOptions = Object.assign(this.defaultOptions, options);
      this.remotedev = connect(connectOptions);

      const connectionProxy = new RemoteDevToolsConnectionProxy(
        this.remotedev,
        connectOptions.name
      );
      return connectionProxy;
    }
    
    send(action: any, state: any): any{
        this.remotedev.send(action,state);
    }
}

 

 

 

😛 remote 파일을 app.moudule에 추가해주자!

 

app.module.ts

import { RemoteDevToolsProxy } from './remote-devtools-proxy';


if (!window['devToolsExtension'] && !window['__REDUX_DEVTOOLS_EXTENSION__']) {
  let remoteDevToolsProxy = new RemoteDevToolsProxy({
    connectTimeout: 300000, // extend for pauses during debugging
    ackTimeout: 120000, // extend for pauses during debugging
    secure: false // dev only
  });

  window['devToolsExtension'] = remoteDevToolsProxy;
  window['__REDUX_DEVTOOLS_EXTENSION__'] = remoteDevToolsProxy;
}
.
.
.
.
.
export class AppModule {}

 

🤡 remote-dev-tools를 실행시키자

remotedev --hostname=localhost --port=8000

그러면 브라우저에서 localhost:8000를 띄어본다.

아래와  같이 뜨는걸 볼 수 있다.

 

🛺 개발자 도구에서 포트포워딩을 시키자

아래 사진처럼 포트포워딩을 통해서 localhost:8000을 해주면 ionic+angular에서 redux-dev-tools이 사용가능하다.