material-uiのSnackbar with Redux #58

今日やったこと

バイトでした。今日はバイト先での出来事というか得た知見を。

material-uiのSnackbar with Redux

（こんなピンポイントな記事が何かの役に立つかは謎ですが。。。）

ボタンを押すとテキストエリアの文字が何処かへ送信されるみたいなモノを作っていました。（NDAに誤って触れないように必要以上に注意を払いすぎた結果やたら抽象的な表現が多いですが気にしないでください）

保存が完了したらSnackbarで「保存しました」みたいに出したいと。

そういったものを作っていたのですが、Snackbarの仕様が厄介というか。openというpropにtrueを渡すと表示されて、autoHideDurationで指定したミリ秒後に消えます。ただ、openをtrueにしたままだとビューのレンダリングが走るたびにSnackbarが表示されるという挙動をしてしまうので、表示し終わったらopenをfalseにしてやる必要があります。(でも表示中にfalseにすると消えちゃう。)

ちゃんとドキュメント読めと言う話なのですが、SnackbarにはonRequestCloseというpropがあって関数を渡すと、autoHideDurationで指定したミリ秒後に消えるタイミング or 外の領域をクリックしてSnackbarが消えるタイミングで呼ばれます。(ちなみに引数にどの原因で消えるのかを取るのでなにか分岐させたいときはその値を使うといいですね。そんなことある？って感じはしますが。)

つまり、表示状態をstateに持っておいてonRequestCloseの中で、それを切り替えるactionをdispatchしてあげればOKですね。ここにたどり着くまで3時間位かかってしまった。

回りくどいけどちゃんとドキュメント読んでから実装は考えようね。という話でした。

雑談

フロントエンド、楽しくなってきたぞ…!?