React ステート管理 比較考察 - uhyo/blog
こんにちは。Reactの話題の中でもかなりの部分を占めるのがステート管理、さらに言えば各種のステート管理ライブラリです。今さらながら、Reactにおけるステート管理の手法やいくつかのステート管理ライブラリを比較考察して記事にまとめました。 useState + バケツリレーReactにおける基本的なステート管理はuseStateです。ひとつのコンポーネント内で完結するようなステートならばuseStateは非常に適しており、他の選択肢はほぼ無いと言っても構わないでしょう。 ステートをアプリケーションの広範囲で使いたい場合が問題です。次の画像に例示されるように、分岐したコンポーネントツリーの末端のコンポーネント（使用者）で同じステートを参照したい場合を考えます。 useStateと組み合わせる場合、もっとも原始的な方法はpropsのバケツリレーによるものです。propsは親コンポーネントから子
Using TypeScript with Redux Toolkit - LogRocket Blog
Editor’s note: This article was last updated by Piyush Sinha on 10 May 2023 to update code for readability and include information about handling async logic using redux-thunk. Although Redux is a common preference for managing state in a React application, it’s important to acknowledge that configuring Redux with its boilerplate code can be a tedious and frustrating process. The Redux team came u
Facebook製の新しいステート管理ライブラリ「Recoil」を最速で理解する - uhyo/blog
昨日、Facebook製のReact用ステート管理ライブラリRecoilが発表されました。Facebook製といってもReact公式のステート管理ライブラリとかそういう位置付けではないようですが、それでも大きな注目を集めているのは間違いありません。 そこで、筆者がRecoilに対して思ったことや、筆者の視点から見たRecoilの特徴を記事にまとめました。 なお、この記事の執筆時点では副作用の扱いなどの点はいまいち情報が揃っていません。この記事では速報性を重視し、コアのステート管理部分に絞って考えています。また、まだexperimentalなライブラリなので、今後この記事の内容からRecoilのAPIが変化したとしても悪しからずご了承ください。 この記事を書くときに筆者が色々試していたCodeSandboxはこちらです。 https://codesandbox.io/s/recoil-san
TwitterやSlackのRedux Storeを覗く | Recruit Tech Blog
{ 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
Redux Toolkit で React.js の状態管理をもっと簡単にする方法[TypeScript版]
Redux Toolkit で React.js の状態管理をもっと簡単にする方法[TypeScript版] React.jsの状態管理ライブラリはReduxが有名ですが、結構複雑だったりステートを一つ更新するだけでもタイプ量が多くなってしまうというデメリットもあります。 そこでこの記事ではRedux Toolkitというライブラリを使用して、もう少し簡単に状態管理する方法をご紹介します。 投稿日2020年01月27日 更新日2020年01月29日 環境は react : 16.12 typescript : 3.7 @reduxjs/toolkit : 1.2 react-redux : 7.1 でお送りします。 この記事でやること 基本的に以前作成したTodoアプリにRedux Toolkitを導入します。 Todoアプリについては下記記事を参照ください。 React.js + Typ
![Redux Toolkit で React.js の状態管理をもっと簡単にする方法[TypeScript版]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a30174b13b59e7f3dd471819be977e4692229a1e/height=288;version=1;width=512/https%3A%2F%2Fwww.webopixel.net%2Fblog%2Fwp-content%2Fuploads%2F2018%2F08%2Freact-icon.png){kind=tracking}
HookとRedux ToolkitでReact Reduxに入門する | Hypertext Candy
この記事では、React アプリケーションに Redux を組み合わせる方法を紹介します。 タイトルの通り、React の機能である Hook と Redux の組み込みを簡単にしてくれるライブラリ Redux Toolkit を活用した比較的新しめの方法なので、他の解説記事とは少し異なる記述になるかもしれません。 これから React や Redux を勉強する方は戸惑うかもしれませんが、導入方法がいくつかあるというだけで、どちらも間違いではないので、参考の一つとして読んでください。 Redux とは 状態管理 Redux とは、JavaScript製の状態管理ライブラリです。 「状態」とは、アプリケーションで扱う動的なデータという理解でよいでしょう。たとえばユーザー名とか、いいねの数が「状態」です。状態は時系列とともに変化します。 状態管理ライブラリが解決する問題は、コンポーネントをま
Redux 再考 - mizchi's blog
今まで自分で作ったものが十数個、仕事で5社ぐらいの redux を見てきたので、その結果思うところを書く。 前提として、自分はエコシステムに乗るという意味で今では redux 肯定派だが、redux それ自身が過剰に抱えている複雑さはもっと分解されるべきだ、という立場。 Redux がうまく設計されているとどうなるか 一貫した一つの設計論に従うので、考えることがなくなる 難しさが廃されるのではなく、難しい部分が一箇所に集中する。React Component の末端では、何も考えることがなくなる。状態管理という難しい部分を作る人と、末端のコンポーネントのデザインに注力する人を分けられる。 大規模になっても設計が破綻しにくい、というエンタープライズ向きな特性を持つ。が、その技術基盤は(静的)関数型由来の考えが多く、基礎設計や基盤理解にはハイスキルが要求され、需要と適用対象のミスマッチを感じる
React(+Redux)+gRPCで実現するクリーンアーキテクチャ＋マイクロサービス構成
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 設計がしっかりしていないまま開発をしてしまうとビジネスロジックとライブラリが密結合となりがちです。 密結合度が高いほど修正が困難となり、継続的な開発の難易度が上がっていきます。（技術的負債） またプロジェクトが大きくなってくると扱うデータ量も多くなり処理速度もデータ量に比例するため、計算量オーダーの影響を受けます。 プロジェクトのそれぞれの機能に対して 再利用可能 テストしやすい 機能追加しやすい ビジネスロジックとライブラリ、REST API（+マスターデータ）を分離できる となっていれば継続的な開発がしやすいです。 最近で
GitHub - torhovland/blazor-redux: Connecting a Redux state store with Blazor.
This library offers Redux-style state management for Blazor, with support for both C# and F#. The implementation is based on Redux.NET. The combination of Blazor and Redux becomes an incredibly compelling platform for frontend development—more compelling than any other alternative, if you ask me: Blazor uses .NET, thus comes with a strong type-system built-in, like Elm, Purescript, OCaml, and to s
Rx時代の先にあるもの
こんにちは、アプリケーション共同開発部のみなみです。 iOSアプリ開発を始めてから様々なライブラリを使ってきました。その中で特に強力でおもしろいと感じたのが、Rx (Reactive Extensions)に影響を受けたReactiveCocoaや、RxのSwift実装であるRxSwiftです。Rxライブラリとそれが実現するリアクティブプログラミングは、アプリ開発を大きく変えました。この記事では普段の開発で感じたRxライブラリの威力や課題、そして未来について書きたいと思います。 Rxライブラリは何を変えたのか イベント通知の統一 フラグ変数、深いネストを一掃して見通しが良くなった 複雑な非同期処理を分かりやすく表現 Rxライブラリの課題 依存度の強さ イベントを実行することの影響が予測できない 高い学習コストが割りに合わない部分がある 課題への解決策 async/await Redux 未
たぶんこれが一番分かりやすいと思います 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がさっぱりわかんねぇ！」 ぐらいの人向け。自分
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Persisting state locally · Human Redux