electronでRedux DevToolsを使う!

渡辺爽太 — Wed, 19 Aug 2020 13:07:58 +0000

はじめに

electron と Reduxを使ってエディタを作成しているんですが,
やっぱり動的にReduxを操作したいってことでRedux DevTools Extension
を使用することにしました. ついでにReactのDevToolsも入れます.
electronを使った場合が日本語であまりなかったので紹介します.

前提

electron, Reduxを使っている前提とします(当然ですが)

手順

まず, electron-devtools-installerを入れましょう.

npm install electron-devtools-installer --save-dev

yarn add electron-devtools-installer -D

次にメインプロセスの部分に以下のように追加します.

//index.js
import installExtension, {
  REACT_DEVELOPER_TOOLS,
  REDUX_DEVTOOLS,
} from 'electron-devtools-installer';

...
...
...
//electronを起動時にDevToolsを開く(これ便利だからおすすめ)
win.webContents.openDevTools();

installExtension([REDUX_DEVTOOLS, REACT_DEVELOPER_TOOLS])
.then((name) => console.log(name))
.catch((err) => console.log(err));

これで以下のようにReduxとReactのDevToolsが入りました!

しかしReduxの方をみてみるとなんか言われています…

「ストアがみつかんないよ!!」

というわけでストアを接続してあげましょう.

ストアを作成しているところをみてください.
一般にcreateStore関数があるところです.

 const store = createStore(
   reducer,
   // 以下を追加
   window.__REDUX_DEVTOOLS_EXTENSION__&& window.__REDUX_DEVTOOLS_EXTENSION__()
 );

window〜を追加してください. これでストアを接続できました.

とらゼミの場合

この節はトラハックのエンジニア学習ゼミ【とらゼミ】の日本一わかりやすいReact-Redux入門
で勉強した方向けになります. 対象でない方はスキップしてください. m(_ _)m

とらゼミではreduxのcreateStoreをreduxCreateStoreという名前でimportしていました.

//store.js
import { combineReducers, createStore as reduxCreateStore } from 'redux';
import EditorReducer from '../editor/reducers';

export default function createStore() {
  return reduxCreateStore(
    combineReducers({
      editor: EditorReducer,
    }),
      // 以下に追加
    window.__REDUX_DEVTOOLS_EXTENSION__ &&
      window.__REDUX_DEVTOOLS_EXTENSION__(),
  );
}

これはなぜかというと他の場所(index.jsx)でcreateStore関数をつかってストアを作成したかったからです.
よってwindow〜を追加する場所は上記のようにstore.jsの中になります.

結果

以下のようになったら完了です.

おわりに

Let’s Redux!!

react-aceでselectedTextを取得する

渡辺爽太 — Mon, 06 Jul 2020 07:39:59 +0000

はじめに

現在チームでプログラミングエディタを作成しています.
react-aceを利用してエディタ部分を作っているのですがreact.jsなんも知らない初心者なので公式ドキュメント見ても詰まりました…
そのメモとして記しておきます.

やりたいこと

タイトルにも書いてあるように選択したテキストを取得します.

道のり

公式ドキュメント

公式ドキュメントにはこんなことが書かれており, よっしゃーとコピペしたらもちろんエラーがでました. 「refs」って誰?って言われました. 僕も同意見です.

もっと読んでみたらドキュメントにこんな記述があって

自分のものにはrefがなかったので追加してみましたができませんでした.
というかそもそもエラーでuseRef()やcreateRef()使えと言われました.
これ多分僕が全体的な理解をしてないからわかんないんだろうな.
雲行きが怪しくなってきた…

stack Overflow

似たような質問があった! やったぜ!
React v16.12 +だと

this.refName = React.createRef();

refName作って

refを指定して

this.refName.current.editor.getSelectedText()

で取得できる.

refを自分で作ってそれを使って繋げてるっぽいな

ありがとうStack Overflow!

最終的なコード

今回はクラスコンポーネントではなく, 関数コンポーネントだったのでちょっと実装は変わりましたがこんな感じになりました.

const myRef = React.createRef();
    export default function EditArea () {

        const onSelectionChange = () => {

            const text = myRef.current.editor.getSelectedText();
            console.log(text);

        };
        return (
            
        );

}

onSelectionChangeはセレクションが変わったとき, つまりは選択範囲に変化が生じたときに呼ばれます.

追記

これよりもいいと思われる方法を発見した.
AceEditor の属性にonLoadというのがあり, それはエディタインスタンスを取得できます.
具体的には以下の通りです.

    export default function EditArea () {
        const editorInstance = "";
        const onSelectionChange = () => {

            const text = editorInstance.getSelectedText();
            console.log(text);

        };

       onLoad = (newEditorInstance) => {
           editorInstance = newEditorInstance;
        }
        return (
            
        );

    }

エディタインスタンスの作成が終わったらonLoad関数が呼ばれます.
関数内でeditorInstanceを代入することで準備完了, あとはこのインスタンスの関数から呼び出すだけです.

ちなみにエディタ全体の文字を取得するのはgetValue()です.