DeNA TechCon 2018- Frontend:DDD - - DeNA Design
約1年間の構想と実装期間を経て、担当事業のKenCoMがリニューアルオープンしました。今回の発表には、その過程で向き合った課題・解決したテクニック、DDDの統合を盛り込んでいます。【公開資料】：サービス開発における フロントエンド・ドメイン駆動設計の実践 いま、フロントエンド・エンジニアには、SPAを筆頭にリッチクライアントと呼ぶに相応しい実装が求められています。私の担当事業に限った話ではなく、フロントエンドの状態管理（データバインディング技術・データフローアーキテクチャ）は、次のステージに移行している様に感じています。 従来バックエンドが抱えていた複雑さの取り扱いが、フロントエンドに移行してきているのは間違いないでしょう。DDDは言語不問のアプローチであり、プログラミングのためだけのもではありません。この一角をコードに反映させることで「アプリケーションが複雑に変化していっても破綻しない」
moducks で Redux-Saga の冗長さと戦う - Qiita
読者対象 React や Redux でバリバリ書ける Redux-Saga を使うことの長所や短所を知っている 関連リンク redux-sagaで非同期処理と戦う - Qiita たぶんこれが一番分かりやすいと思います React + Redux のフロー図解 - Qiita Redux-Saga のつらいところ 以下のような，誰かのユーザ情報をランダムに取ってくる擬似APIを考えます。一定時間遅延し，一定確率で失敗します。 import { delay } from 'redux-saga' export const fetchRandomUser = async () => { await delay((0.3 + Math.random()) * 1000) if (Math.random() < 0.2) { const faces = ['xD', ':D', ':('] th
[redux][react][redux-saga]redux-sagaで検索機能の実装を写経してCSPのパワーを感じる - Qiita
この記事は、@inuscriptさんによる「redux-observableで検索機能の実装を写経してRxJSのパワーを感じる」をRedux-Sagaで書きなおしたものです。 本記事の目的 実用コードにおける非同期処理では以下のような問題が頻出する。これらについて元記事におけるRedux-obserbable(あるいはAngularが提供する)RxJSを用いた解決方法に対して、Redux-sagaによる解決方法を比較する。 (元記事よりの引用) この時、大きく以下３つの問題に当たる 1: キーストローク毎にリクエストするのはよろしくない 2: 同じリクエストで済むのに無意味にリクエスト飛ばすのはよろしくない foo -> fooo -> foo -> fooo -> foo みたいな入力をした場合に不必要にデータ飛んでしまう可能性 3: 複数リクエストを発火した場合の処理 A -> Bの順
![[redux][react][redux-saga]redux-sagaで検索機能の実装を写経してCSPのパワーを感じる - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/e9fd23ccc12c60096ccf1d1e8b3cd50627f03067/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9cmVkdXgtc2FnYSVFMyU4MSVBNyVFNiVBNCU5QyVFNyVCNCVBMiVFNiVBOSU5RiVFOCU4MyVCRCVFMyU4MSVBRSVFNSVBRSU5RiVFOCVBMyU4NSVFMyU4MiU5MiVFNSU4NiU5OSVFNyVCNSU4QyVFMyU4MSU5NyVFMyU4MSVBNkNTUCVFMyU4MSVBRSVFMyU4MyU5MSVFMyU4MyVBRiVFMyU4MyVCQyVFMyU4MiU5MiVFNiU4NCU5RiVFMyU4MSU5OCVFMyU4MiU4QiZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9MzFjYmFlMTdhOGMwZjMzNTc0MzRhMDA0Y2ZjYzBlY2Y%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwdWVoYWomdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTU3OWE2NTM4YzBkMzg0MGYyZDhmMmMxN2IxYTE4Nzdi%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3Df56573710f1496147db654b91d464685)
redux-saga - Saga Middleware for Redux to Handle Side Effects - Interview with Yassine Elouafi
ReduxDebugging JavaScript - Interview with Mehdi Osmanredux-saga-test-plan - Test Redux Saga with an easy plan - Interview with Jeremy FairbankRedux Form - The best way to manage your form state in Redux - Interview with Erik RasmussenRedux Zero - Single Store, No Reducers - Interview with Matheus LimaKea - High level abstraction between React and Redux - Interview with Marius AndraRekit - Toolkit
redux-sagaでReduxのルーティングを制する - Qiita
3行で言うと react-router はただのコンポーネント切り替え react-router-redux はロケーション情報をストアに同期するだけで、コンポーネントを表示する前にデータ取得する方法を提供しない redux-saga を使えば最高のルーティングが実現できるのでは？ → redux-tower を開発中 リポジトリ: https://github.com/kuy/redux-tower デモ：http://kuy.github.io/redux-saga-tower/blog/ はじめに 「redux-sagaでReduxのルーティングを制する（ｷﾘｯ」とか言っちゃいましたが、まだライブラリをリリースできていませんし、実務で使っているわけでもありません。本当に制しているかどうかはこれから使っていって改良も加えつつって感じです。redux-saga を使う時点でそっと閉じる人
たぶんこれが一番分かりやすいと思います React + Redux のフロー図解 - Qiita
【追記】 もうこれ古いから参考にしないでください https://t.co/mXtcc73Orf — もし Laravel が流行しなくなってこられてきてたとしたら、絶対に捨てられてこられてたと思うか (@mpyw) January 26, 2021 Redux にはその昔 connect()() とかいうクソ API と， Redux-Saga とかいう宗教がありました という考古学です — もし Laravel が流行しなくなってこられてきてたとしたら、絶対に捨てられてこられてたと思うか (@mpyw) January 26, 2021 読者対象 Tutorial: Intro To React - React Example: Todo List · Redux 「チュートリアルそれぞれ一周した！Reactは何とか理解できたが，Reduxがさっぱりわかんねぇ！」 ぐらいの人向け。自分
Using React (-Native) with Redux and Redux-Saga. A new proposal?
Data Flow with Redux and Redux-Saga (proposal)I really love the principles I learned after switching from AngularJs to React and its Flux architecture. At the moment I’m working on a real world application for another company. After my first React-Native App with Redux, I decided to add Redux-Saga to the mix. Complex transactions and side effects should be readable and easy to maintain too. This b
redux-sagaで副作用をコントロールする
2016/07/14 に行われた M3 tech meetup! #2 で使った発表資料です。
redux-sagaの channel を使って同時実行数制御をする - Qiita
はじめに redux-sagaで非同期処理と戦う - API呼び出しのスロットリングでは同時実行数制御をputとget、二重ループで実装されていたが、redux-sagaのchannelを利用することでも同様のことができたので紹介する。 channelによる制御方法 実はズバリやりたいことが redux-sagaのドキュメント - 3.11. Using Channels > Using channels to communicate between Sagas に書いてある。 やることは、 channel を生成する。生成したchannelオブジェクトがキューになる。 同時実行数の数だけタスクをforkしておく。この際、生成したchannelオブジェクトをそのタスクに渡しておく。このタスクがワーカースレッドのように動作する。 タスクの処理では、引数で受け取ったchannelオブジェクトか
Handling async in Redux with Sagas
Using Redux is a nice way to code structured, testable Javascript applications. But there’s still one thing that can prove to be a challenge, asynchronous operations. If you don’t know about redux, you can check out my article about it: “Functionally managing state with Redux” Asynchrony is not hard to achieve in Javascript, the language is perfectly suited for it. But testing async behaviour and
Managing Side Effects In React + Redux Using Sagas
Redux is a Flux-like framework that has exploded in popularity within the React community. It reduces complexity by enforcing a unidirectional data flow, the use of single state atom, and pure reduce functions for state updates. For me, there has always been one thorn in the React+Flux setup, which is that more complicated processes involving coordination of action creators and side-effects are ha
Using redux-saga To Simplify Your Growing React Native Codebase
Some of the most fragile, embarrassing, and unreadable code you will write is flow control. — Beowulf So What’s the Problem Here Anyway?Look. You know how it goes. Just call an API and grab the data. Simple right? No worries! Promise!Oh, but it might timeout after 30 seconds. So trap for that. And we should also handle server errors because the backend team is using PHP (zing!). Then once we get t
Manage side-effects efficiently with redux-sagas
Redux sure does look clean in your daily Todo-Showcase-Example... it separates your code in it's different concerns and leverages FRP concepts with easily testable pure functions. But while you develop your actual app, you start to realize that asynchronous http requests will mess up your totally awesome pure action-creators and makes them harder to unit-test.There are many ways to deal with side-
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
おれたちのスマホアプリとWeb版 / Real World React Native
React + FLUX + Redux + Redux Saga のお話
Single Responsibility Principle in Sagas
redux-saga 0.14.3 flowtype definitions
Redux Middleware Wars (Japanese)
redux-sagaを使ったとてもシンプルな認証処理
Yuki Kodama on Twitter: "My understanding of redux-saga. I’m working on Saga Visualizer, which can be integrated to Redux DevTools. https://t.co/qW5emA6zab"