react-fluxでnotificationしたい state? store?

TL;DR

考えがまとまってないし、結論もまだない。stateでゴニョゴニョやるのではなく、storeを使って、それを監視しとくほうがいいんじゃないかなあ、と思ったという話。

stateでゴニョゴニョやったexample

react-fluxを使っていて、「通信に失敗しました」「設定を保存しました」とかのnotificationを出したい。

具体的にはこんな。
emoji-app-5

実はこれはウソ実装。本当に保存したかは確認してなくて、componentのhandlerから、actionを叩いたあとに、notificationをtoggleさせている。表示データはrecentの先っちょ使ってる。ウソ実装かどうかはどうでもいい。

https://github.com/lyrictenor/nwjs-emoji-app/blob/586514e179e5d5ae329648684312265fa9668008/lib/components/IconImage.jsx#L9-L10
https://github.com/lyrictenor/nwjs-emoji-app/blob/586514e179e5d5ae329648684312265fa9668008/lib/components/MainSection.jsx#L73-L80

toggleはうえのほうのcomponentから渡されてくる関数で、うえのほうで this.setState({ isActive: !this.state.isActive }) とかそんな感じ。
react-notification これを使った。

良さそうなライブラリ

npmざっと見(react notification, react alert, react flashで検索)で使えそうなのはこの2つだった。

bootstrap? bootstrapでjs出てくるやつは強い意志で使いたくない。

モヤモヤ

なんかすごいスパゲティ感ある。notification storeというqueueがいて、そこを監視しといて順々に取り出して、あと一定時間で消えたりクリックしたら消えたりなんかイベント起きたりしてほしい。

reduxよく分からずにコピペして動いている部分

redux exampleよくわからずコピペしてきて動いてるからそのままなんだけど、なんでここで急にdispatchが出てくるんだろう。
https://github.com/lyrictenor/nwjs-emoji-app/blob/586514e179e5d5ae329648684312265fa9668008/lib/containers/Root.jsx#L17-L18

actionの中から別のネームスペース(?)のaction呼ぶときどうするんだろう。
actionもstoreも関数だから、どうやって結びつけるんだ。

https://github.com/lyrictenor/nwjs-emoji-app/blob/586514e179e5d5ae329648684312265fa9668008/lib/actions/EmojiActions.js#L9

ここでなんかおもむろに出てくるdispatchと 別ファイルのactionをimportして、bindAction()すると、bindされたactionが使えるのかしら? 一体何を言ってるのか。
actionといいつつactionの中で、dispatchすればいいんかな? そしてそれはいいんかな? dispatchしてのactionなのでは、、、
dispatchないところで、action叩くには、どうするんだろう。dispatchってなに。

storeにするとして

クリックしたら消えるだけじゃなくて、クリックしたらなにか起きて欲しいケースも有るだろうし、notification store どういう構造にするといいのかよくわからない。idと表示文字列とか入った文言とがあればいいかな。
react-notification に合わせるなら messageとactionとonClickか。

jsなかなか時間かかるなー。

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中