CloudFunctionsでHTTPリクエストをする際に気をつける箇所

CORS Firebase Cloud Functions GCP Node.js

@yushimatenjinです。

CloudFunctionsを少し触って知見が溜まったのでメモ

 

Cloud Functionsの知見
・レスポンス帰ってこない時はresをreturnしてない

responseを返さないとタイムアウトまでCloudFunctionsが動きます、しっかりresを返しましょう。
・req.bodyで読めない場合はContent-Typeを設定していない

FirebaseはContent-Typeをしっかり設定するとreq.body.**で送信した値を取得することが出来ます。
・corsをする場合にはcorsライブラリを使うと楽

corsをしたい場合にはcorsというライブラリがあるので使うと早いです。

withReduxSagaの動作について

React Next.js

どちらもブラウザで実行されているがasyncオプションを渡さない場合にはSagaの実行が完了するまでレンダリングされない

export default withReduxSaga(connect(state => state)

(SyncExample))

 

一方Asyncオプションにtrueを渡すとページが先にレンダリングされる。

export default withReduxSaga({async: true})(
  connect(state => state)(AsyncExample),
)

https://github.com/bmealhouse/next-redux-saga.git

 

 

Reduxの動きについて

Next.jsとRedux Sagaの連携について

Redux SagaとNext.jsを組み合わせて使う方法についての考察を書いていきたい。

 

Next jsのSSRとReduxのStateが共有する仕組みがあることは理解した。

Networkを見てみるとSSRはHTMLを返しているわけではなくJSをやり取りしているためSSRで使用したStateをやり取りする事が可能。

秋葉原に行ってきた。

秋葉原 IoT

　@yushimatenjinです。本日はブログを初めて３日目、記事は６記事目（本当はミスって２重投稿してしまった記事は記事とは言えないので５記事ですが）です。当初は、エンジニア関係のブログなのかなと考えていたのですが、このブログの目的として自分の活動を記録・記憶する事にあったことと、更新を停止してしまっては元も子もないなということで日常的な事も書いていきたいと思います。

 

今日は秋葉原に行く用事があったので秋葉原へ行ってきました。

千石電商

秋葉原の駅近くのお店でスイッチをPayPayで購入しました。

f:id:yushimatenjin:20190105212141j:plain

４つのボタン赤　黄　青　緑

アウトプットではなくインプットができるようになったのでこれから何かしらを作っていきたいと思います！

 

インフルエンザが少し怖かったのでマスクを買いにいったら、秋葉原のファミリーマートがセルフレジになっていて少し時代の進歩を感じました。

Reduxの概念を掴む方法

React Redux

@yushimatenjinです。Reactを使用していると、Reduxとという言葉を聞くことがあると思います。Reduxのアーキテクチャは理解してしまうとかなり簡単に思えるのですが、私自身、Redux関係の記事などを見ても考え方の前提を知らなかったため少し理解に手間取ったので、自分の中で噛み砕いた結果の理解を共有したいと思います。

 

　この記事では、前提の知識の紹介などをすっ飛ばしてとりあえず自分が理解する前にこうやって噛み砕ければ良かった！いう考え方を紹介するので、少しでも理解の手助けになればと思います。

 

 

　前提：この記事Reactとのつなぎ込みなどはすっ飛ばしてとりあえず概念の理解を進める為の手助けをします。

　対象者：Reduxをこれから使うであろう方々

 

　Reduxは何をするのかというと状態を管理します。理解を深めるには現実世界と紐付けるのがかなり良いと考えているので、とりあえず現実世界にある状態を再現し、自分の脳への理解を助けたいと思います。

 

状態-1: 自分一人でファミレスで行き、テーブルへ座っている状態

　ここへReduxの基本的な概念であろう４つの概念を当てはめていきたいと思います。

Store　｜Action 　｜Dispatch　｜Reducer

この４つが理解できれば考え方が理解できればおそらくReduxの概念の理解が進むはずです。

　まず、その自分がいるファミレスが現在の状態がStoreです、よく聞くStoreです。

　その次にActionについての説明です。人間はこの中からいくつものActionを繰り出すことが出来ます。とりあえず、商品の注文をしようと思います。そのために注文のために呼び鈴を押すことが出来ます。この注文のために呼び鈴を押すこと、これがActionです。そして実際に注文のために呼び鈴を押すことがDispatchです。

　結果どうなるかというとReducerである店員の方が目の前に来ている状態ができあがります。

　その現在のファミレスの状態がActionがDispatchされたことによりReducerが反応し出来上がったStoreです。

 

　以上です、１ミリでもReduxの概念の理解が進めば光栄です

 

　この記事は@yushimatenjinによって書かれた記事です。@yushimatenjinはこの記事を書いた後に即座にReduxのリポジトリ・公式サイトを読み返しますので追記かと思います。