[B! redux] spinningplatesのブックマーク

TypeScriptでReactをやるときは、小さいアプリでもReduxを最初から使ってもいいかもねというお話 | フューチャー技術ブログ

TypeScriptでReactをやるときは、小さいアプリでもReduxを最初から使ってもいいかもねというお話前日の丸野さんがReduxを分かりやすく解説してみたというReduxの基本的な紹介を行いました。Reduxはコンパクトなライブラリながらよく考えられた仕組みです。Jetpack ComposeやらFlutterやら、ReactインスパイアなGUIフレームワークも増えているので、JavaScript（TypeScriptではなく） + Reduxをやってみるのは、ウェブに限らず、今後のユーザーインタフェース関連のコードを触るための理解力向上には良いと思います。本エントリーは、プロダクションコードでたくさんRedux周りにもreducerなどを実装しなくてはいけなくなったときの次のステップとして、Redux Toolkitの紹介をします。たいてい、Reduxは導入コストが大きく、

spinningplates 2020/05/03

リンク

TwitterやSlackのRedux Storeを覗く

{ domainData1 : {}, domainData2 : {}, appState1 : {}, appState2 : {}, ui : { uiState1 : {}, uiState2 : {}, } } ref: Basic Reducer Structure and State Shape · Redux 正規化 Recipesでは正規化についても言及しており、リレーショナルデータを管理する場合はデータベースのように正規化することを推奨していました。以下は投稿が複数のコメントを持つ例です。postsはcommentsのidだけを持っています。 { posts : { byId : { "post1" : { id : "post1", author : "user1", body : "......", comments : ["comment1", "comment

spinningplates 2019/12/31

react
redux

リンク

[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の順

spinningplates 2018/08/14

redux

リンク

Redux vs. The React Context API

👋 Hey! If you have a subscription to egghead.io you might enjoy my course on the Context API over there. It's only about 35 minutes long and covers a lot of ground: how to manage state with Context (without Redux), patterns for structuring your code, how to display notifications, testing, performance. All in real-world scenarios. React Context for State Management React 16.3 added a new Context A

spinningplates 2018/07/28

react
redux

リンク

Redux 4 + TypeScript: A type-safe approach

spinningplates 2018/07/18

react
redux

リンク

ReduxとMobXの選定観点 - Qiita

この記事を書いた当時、MobXは余計な複雑さが隠蔽され、とても良く目に映りました。何よりReduxにはOOPが可能なモデルが無い、という当時のReduxに対する不満を解決してくれました。(今はReduxにもモデルを持ち込む手法を選んでいるので不満はありませんが) 直近、同僚に「Redux と MobX の選択はどうすれば？」と相談されたので、その日の返答内容をまとめてみました。 TODOサンプルだけでは測れない現実の課題ライブラリのキャッチアップに、TODOや「+1」するカウンターで検証することはよくあると思います。ただし、これだけでは長期運用するプロダクトの検証には不十分です。 MobXは便利で簡単に始めることが出来るため、Storeを無作為に参照しあってエンバグしやすいコードが出来てしまいがちです。 Storeが数えるほどしかなく、機能も単純であれば原因を突き止めるのは容易です。しか

spinningplates 2018/05/25

リンク

reduxでビジネスロジックをゴリゴリ書く

redux domain ビジネスロジック

spinningplates 2018/05/13

redux

リンク

redux-sagaで非同期処理と戦う - Qiita

はじめに ReduxはSingle Store、immutableなState、副作用のないReducerという３つの原則を掲げたFluxフレームワークです。しかし他のフレームワークと違って提供しているものは最小限で、とてもフルスタックとは言えない薄さです。そのためすべてにおいて定番と言える書き方が定まっているわけでもなく、どうしようか迷ってしまうことも少なくありません。その筆頭とも言えるのが非同期処理の扱いです。コミュニティでは今でもさまざまな方向に模索が続いていますが、よく使われているものだとredux-thunk、redux-promiseあたりでしょうか。Reduxに限定しないのであればreact-side-effectというものもあります。こちらはTwitterのモバイルウェブ版で使われていますね。どれを使っても非同期処理が可能になりますが、それはあくまで道具であって、設計の