タグ

asyncとfrontendに関するlizyのブックマーク (5)

  • React におけるローディングの状態管理について - freee Developers Blog

    エンジニアの @_tohashi です。freee developers adevent calender 5 日目をやっていきます。 React などを使用した UI コンポーネントの実装、特に状態をどこで管理するかというのは実装者やアプリケーションの要件によって分かれがちなポイントであると思っていて、例としてはフォームの入力値、ダイアログの開閉、スピナーの表示などが挙げられます。各種ドキュメントや Issue, Example を見ても様々な流派があり、結局のところ Redux の FAQ にもあるようにこれが正解といったものはなくモデリングや要件に応じて適宜判断すべき話ではあるのですが、チーム開発においてはある程度方針を統一しておく必要があるでしょう。 記事ではそうしたコンポーネントの状態管理のうち、特に非同期処理が絡んできて複雑になりがちなローディングについて自分の経験をもとに実

    React におけるローディングの状態管理について - freee Developers Blog
  • Reactの次期機能のSuspenseが凄くって、非同期処理がどんどん簡単になってた! - Qiita

    React17の次期新機能のSuspenseが凄い! と思ったので少し学習していました! Suspense自体の説明は下の動画がわかりやすいかも。 13:15ぐらいからプログラムのDemo 29:30ぐらいからSuspenseとはなんぞや、という説明をしてくれています。 Githubにdemoもあったので、実際に動かしてみたい方はこちらも是非是非 つまりSuspenseって何? Suspenseっていう機能があるわけじゃないんです、すみません 概念というかなんといいますか 自分の意訳・解釈なので間違っていたら土下座しに行きます 外部APIからデータを取得・表示するような処理で使えるんですね。 読み込みを開始したらLoadingを出して、APIが戻ってきたらデータを表示してローディングを消して……っていう、reduxやsagaを使って今まで頑張ってきているものがあると思うんですね。 API

    Reactの次期機能のSuspenseが凄くって、非同期処理がどんどん簡単になってた! - Qiita
  • redux-sagaで非同期処理と戦う - Qiita

    Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに ReduxはSingle Store、immutableなState、副作用のないReducerという3つの原則を掲げたFluxフレームワークです。しかし他のフレームワークと違って提供しているものは最小限で、とてもフルスタックとは言えない薄さです。そのためすべてにおいて定番と言える書き方が定まっているわけでもなく、どうしようか迷ってしまうことも少なくありません。その筆頭とも言えるのが 非同期処理 の扱いです。コミュニティでは今でもさまざまな方向に模索が続いていますが、よく使われているものだとredux-thunk、redux-

    redux-sagaで非同期処理と戦う - Qiita
  • Reduxで非同期処理を行う~ES2017のasync/await構文を使って実装する方法

    対象読者 JavaScriptとWeb開発の基礎に理解がある方 Reactに興味/関心があり、これから学び始める方 前提環境 筆者の検証環境は以下の通りです。 macOS High Sierra 10.13.3 Node.js v8.9.4/npm 5.6.0 React 16.3.1 redux 3.7.2 react-redux 5.0.7 async/awaitとは(1) async/await構文はECMAScript 2017で追加された、新しい文法です。その名の通り、 async キーワードと await キーワードの組み合わせで成り立っています。また、非同期処理の仕組みであるPromiseとも密接に連携しています。それぞれの要素について説明します。 Promiseとは async/await構文を説明するにあたり、Promiseは切り離すことができません。まずはPromise

    Reduxで非同期処理を行う~ES2017のasync/await構文を使って実装する方法
  • Reduxで非同期処理を行う~Middlewareを使って実装する方法

    対象読者 JavaScriptとWeb開発の基礎に理解がある方 Reactに興味/関心があり、これから学び始める方 前提環境 筆者の検証環境は以下の通りです。 macOS High Sierra 10.13.3 Node.js v8.9.4/npm 5.6.0 React 16.3.1 redux 3.7.2 react-redux 5.0.7 redux-thunk 2.2.0 非同期処理とRedux 格的なGUIアプリケーションを開発する上で、避けては通れないのが非同期処理です。非同期処理はネットワークやデータベースなどの時間がかかる処理を扱う場合によく用いられる手法で、GUIアプリケーションが外の世界にアクセスしようとする場合には、ほぼ必須となる概念です。 非同期処理についておさらい まずは、非同期処理について簡単におさらいしておきましょう。「非」同期的な処理であると言うからには、

    Reduxで非同期処理を行う~Middlewareを使って実装する方法
  • 1