[B! mobx] mizdraのブックマーク

MobXのdevtoolsまとめ - Qiita

React+Reduxで開発する場合には redux-devtools や redux-devtools-extension を使うことでdispatchされたアクションのログやstoreの変更履歴を見ることができて，デバッグに大変便利です。 React+ReduxではなくReact+MobXを使った場合にはどのようなdevtoolsが使えるのか調べました。 mobx-devtools 公式に提供されているChrome extensionです。storeを変更するactionを実行すると，変更内容とそれに伴うreactionの実行の様子が表示されます。以下のスクショはボタンを押すとカウントが増えるサンプルアプリでボタンを押した時の表示です。actionに名前を付けていなかったのでunnamed actionになっています… mobx-state-tree を使った場合にはstoreの状態を

mizdra 2018/03/07

リンク

React x MobXな趣味プロダクトをTypeScriptでリライトしようとした - console.lealog();

React x MobXでできてる自分専用の音楽ストリーミングサービスがありまして。冬休みなのでTypeScriptで書き直したりしてみようかなと思ってちまちまやってた。ただ結局は自分一人しかコード書かないので、コスパに見合わないと判断して採用は見送った。 https://github.com/leader22/mmss-client/tree/topic/ts まあその過程で色々学びはあったので、忘れないようにメモっとく。環境構築編 Webpackでコンパイルなにはともあれ開発環境を。元がBabel x Webpackだったので、そこをまず変える。 npm install -D typescript awesome-typescript-loader そして`babel-loader`と差し替えるだけ。 TSはReactのJSXにも対応してるので、特に困る点はない。ただWeb

mizdra 2018/01/10

リンク

MobXを使ったアーキテクチャについて - console.lealog();

いまさらですが、俺的Real world MobXです。いちおう半年くらい仕事でも趣味でも触ってきてての今です。あくまで1つの例ですが、どこかの誰かの何かの参考になれば。その前にこんな風に使ってますを紹介する前に、もやもやーっと思ってることを箇条書きにしておきます。俺が考えた最強のアーキテクチャそんなものはない声のでかいやつの言うことを真に受けるな納得できない部分があるなら採用するな Reduxとの比較 Reduxでできたクソコードがあるように、MobXでできたクソコードもありえる役割が薄い分、そのリスクはMobXの方が高い（設計力が試される）と思ってるコードの記述量は絶対に減るので、書き味は良くなる書きやすさと無秩序は紙一重 Flux的なアーキテクチャを踏襲するべきか Action的なものを投げる必要はないが、投げてもいい Storeも単一でもいいし、複数にしてもい

mizdra 2018/01/03

リンク

MobX: Ten minute introduction to MobX and React

MobX is a simple, scala ble and battle tested state management solution. This tutorial will teach you all the important concepts of MobX in ten minutes. MobX is a standalone library, but most people are using it with React and this tutorial focuses on that combination. The core idea State is the heart of each application and there is no quicker way to create buggy, unmanageable applications than by