Reactの状態管理の変遷に関する自分史 From 2014 To 2022
はじめに 2014年にReactを触りはじめて以降、2022年現在まで集中の度合いにバラツキはあるものの、ずっとReactでなんらかのアプリケーションを書いてきました。 その中で様々なアーキテクチャや設計に関する議論がありましたが、特に状態管理についての変遷を自身の体験をもとにまとめてみたいと思います。 多分に昔話的な内容なものの、適度に読み飛ばしてもらいつつ、Reactの状態管理のやや偏った歴史と現在地点の認識の共有になればと思います。 2014- | Reactの導入 - Flux SPA iPhone 4Sが出てスマートフォンを持つ人も多くなり、エンジニアでなくても多くの人が日常的にGmailやMapアプリケーションに触れるようになった時期だったと記憶します。 Webアプリケーションの構築でもフロントエンドへの要求レベルが高くなっていた感覚があり、JavaScriptで動的なView
React Context を用いた簡易 Store
課題 redux を引っ張り出すと大仰になる。Context 下に共有ステートを持ってそこに setState できるだけでよい。 なので、次の 2 つを用意する 現在の state を参照する const appState = useAppState() 現在の state を更新する関数を返す const setAppState = useSetAppState() React.useState() と違って分割している理由は、主にパフォーマンス上の理由 大域な参照なので、可能な限りステートを参照したくない setState() の API は (prevState: State) => State も取れるので、状態更新用途に限ってはそもそも useAppState() せずに済むことが多い でも毎回書いてるけどボイラープレート感強い上に忘れるのでここにメモする 毎回書いてるボイラー
ベストな手法は？ Reactのステート管理方法まとめ - ICS MEDIA
Reactでのシングルページアプリケーションを作成していると、必ず意識しなくてはいけないのが状態管理です。Hooks APIの登場により、アプリケーションの状態管理方法にも選択肢が増えてきました。2023年のReactアプリケーションの状態管理方法はどのような選択肢が考えられるでしょうか？ 状態管理の選択肢 Reactの状態管理として本記事でには紹介している手法は下記の4通りになります。 ローカルステート（useState、useReducer）での管理 Hooks APIのuseReducer、useContextを使った管理 Reduxによる管理 Recoilによる管理 状態管理フレームワークは他にも選択肢がありますが、Reduxを紹介します。理由は、候補として挙がるライブラリの中でもっともシェア数が多く、知名度が高いためです。 下図は、主要なReact状態管理フレームワークのダウンロ
ReduxとReact （Native）Hooksとの共存 - Qiita
Reactは「自由にカスタマイズできる」かつ「日進月歩」というのがメリットの反面、 ネット上には新旧の情報が入り乱れていてベストプラクティスが見つけづらいというのがデメリットになっているのではないでしょうか。 その最たる例がHooks、Reduxをどういった構成にするかだと思います。 巷ではHooksはReduxの機能を補えるから、Reduxはもはや必要ないといった意見もでているようです。 本当に不必要なのでしょうか？ 初学者の方にもなるべくわかりやすいようにReduxの概要・非同期処理について根本的なところから改めて振り返って整理したのち、Hooks（useReducer・useContext）との設計概念・機能比較を行いました。 「もうそんなこと知ってるよ」という方は、Redux概要の箇所は飛ばしていただけるとありがたいです。 【Redux概要】 MVC・Flux・Reduxアーキテク
React ステート管理 比較考察 - uhyo/blog
こんにちは。Reactの話題の中でもかなりの部分を占めるのがステート管理、さらに言えば各種のステート管理ライブラリです。今さらながら、Reactにおけるステート管理の手法やいくつかのステート管理ライブラリを比較考察して記事にまとめました。 useState + バケツリレーReactにおける基本的なステート管理はuseStateです。ひとつのコンポーネント内で完結するようなステートならばuseStateは非常に適しており、他の選択肢はほぼ無いと言っても構わないでしょう。 ステートをアプリケーションの広範囲で使いたい場合が問題です。次の画像に例示されるように、分岐したコンポーネントツリーの末端のコンポーネント（使用者）で同じステートを参照したい場合を考えます。 useStateと組み合わせる場合、もっとも原始的な方法はpropsのバケツリレーによるものです。propsは親コンポーネントから子
React Hooks + Redux - User Registration and Login Tutorial & Example | Jason Watmore's Blog
React Hooks + Redux - User Registration and Login Tutorial & Example Tutorial built with React 16.13, React Hooks and Redux 4.0.5 Other versions available: React: React 18 + Redux, React 17 + Recoil, React 16 + Redux Next.js: Next.js 13 (App Router) + MongoDB, Next.js 13 (Pages Router) + MongoDB, Next.js 13 (Pages Router) + MySQL, Next.js 11 Angular: Angular 15/16, 14, 10, 9, 8, 7, 6, 2/5 Vue: Vue
React Redux Hooks公式ドキュメント翻訳（概要編） - Qiita
Reactアプリケーションの状態管理のためのOSSライブラリである、React Reduxのバージョン7.1.0で追加された、Hooks APIの公式ドキュメントを翻訳していきます。 React Redux Hooks公式ドキュメント翻訳（概要編） React Redux Hooks公式ドキュメント翻訳（useSelector編） React Redux Hooks公式ドキュメント翻訳（useDispatch, useStore編） 2021/1/6公開。原文リンクは以下。 ・公式ドキュメント（React Redux Hooks）：https://react-redux.js.org/api/hooks 今回の記事は概要編です。 Hooks APIとは Reactの新しいhooks APIはローカルなコンポーネントのstateをより簡単に扱うことができる関数コンポーネントです。 React
Redux to Apollo: Data Access Patterns | Apollo GraphQL Blog
January 29, 2021Redux to Apollo: Data Access Patterns As part of NerdWallet’s migration from our React-Redux code base to client state management using Apollo, we’ve been exploring how to effectively implement data access patterns, side-effects handling, and other aspects of client state management using GraphQL and Apollo Client. This first post examines how we accomplish effective data access, f
React+TypeScript+GraphQL+Apollo ClientでReduxを使わずにアプリ開発した話
こんにちは、エンジニアの川上(@natsumican63)です。 前回は、Webエンジニアのみで、ReactNativeアプリ開発を行った話を書きました。 ReactNativeアプリを開発した際、下記の技術を使用しました。 TypeScript React Native GraphQL Apollo Client 今回は、これらの技術スタックを用いた開発を行ってみた際の模様について、お伝えしていこうと思います。 要約 Rexux/Mobx等の状態管理ライブラリを使用せず、Apollo Clientのキャッシュ機構とReactのlocal stateのみで状態管理を行った @apollo/react-hooksを利用することで、通信周りのコードの見通しが良くなった TypeScript(クライアント側)と、GraphQLの型システムで、更に型安全な開発が望める Apollo Clientの
ぼくのかんがえたさいきょうの useState + useContext よりも Redux のほうが大抵勝っている
「Redux は学習コストが高い」などと言って useState（または useReducer）と useContext を組み合わせ 劣化 オレオレ Redux を作ってしまうのを見かけます[1]。よくないことだと思いますが、気持ちは非常にわかります。Redux エコシステムがそういう気持ちにさせてしまう部分は大いにあります。 Redux は それ単体なら 学習コストは useReducer + useContext と同等であることを示してこの気持ち（誤解）を解かしつつ、なぜそういう気持ちになってしまうのか考察してみます。 まず useState と useReducer の違いを押さえておく 知っている方はスキップしてください。 useState と useReducer は本質的には同等で、どちらもコンポーネントにステート（状態）を持たせる役割があります。次のようなカウンターアプリ
Redux Hooks によるラクラク dispatch & states - Qiita
本日 (2019/06/11) React-Redux の version 7.1 がリリースされて、 Redux Hooks が使用できるようになりました。 Redux Hooks によって、connect() を利用しなくても、各コンポーネントとdispatch, state が簡便に利用できるようになります。 サンプルコードです。Action, Reducer 部分は省略です。 ただシンプルにカウンターの数値を増減させるだけのコンポーネントです。 import React from "react"; import { useDispatch, useSelector } from "react-redux"; import { incrementAction, decrementAction } from "./Actions"; const counterSelector = st
TypeScriptでReactをやるときは、小さいアプリでもReduxを最初から使ってもいいかもねというお話 | フューチャー技術ブログ
TypeScriptでReactをやるときは、小さいアプリでもReduxを最初から使ってもいいかもねというお話 前日の丸野さんがReduxを分かりやすく解説してみたというReduxの基本的な紹介を行いました。Reduxはコンパクトなライブラリながらよく考えられた仕組みです。Jetpack ComposeやらFlutterやら、ReactインスパイアなGUIフレームワークも増えているので、JavaScript（TypeScriptではなく） + Reduxをやってみるのは、ウェブに限らず、今後のユーザーインタフェース関連のコードを触るための理解力向上には良いと思います。 本エントリーは、プロダクションコードでたくさんRedux周りにもreducerなどを実装しなくてはいけなくなったときの次のステップとして、Redux Toolkitの紹介をします。 たいてい、Reduxは導入コストが大きく、
Expo+Reduxアプリをデバックする方法を4つ比較 - Qiita
Expo+Reduxアプリをデバックするのに一番いい方法は何だ？ 4つの選択肢を比較しました。 redux-logger Remote Redux Devtools React Native Debugger Reactotron 結論から先に言うと、 React Native Debuggerを使うべし。セットアップガイドはこちら 1. redux-logger Redux-loggerは、どのようなアクションがfireされ、どのようにstateが変わったかをconsole.logしてくれるミドルウェアです。 Expo特有のセットアップ難もなく、Web時と同様に使えます。 短所は、読み専で、Redux Devtools Extensionのようなフルフルの機能がないことです。 あと、プロジェクト毎にnpm iする必要があります。 2.Remote Redux DevTools Remot
Redux と React Context API - 適材適所のススメ - Qiita
Dave Ceddia氏によるRedux vs. The React Context APIを本人の許可を得て意訳しました。 誤りやより良い表現などがあればご指摘頂けると助かります。 原文： https://daveceddia.com/context-api-vs-redux/ React 16.3は新Context API（旧Context APIはほとんど知られておらず、また非推奨であったことから、生まれ変わったと言っても良いでしょう）を追加しました。 Context APIはReactの第一級オブジェクトとして公式のものとなったのです。 React 16.3 が登場するや否や、Context APIがもたらすReduxの終焉についての記事がWeb上を賑わせました。しかしReduxは言うでしょう、「私が死ぬだって？馬鹿馬鹿しい」と。 この記事では、新Context APIの機能、Re
React v16で実装された new Context APIを使って、Reduxへ別れを告げる - Qiita
React v16でContext APIが新しくなりました。 このContextを使うことで、これまでサードパーティーのライブラリに頼っていたstate管理をreact本来の機能で実装できるようになりました。 しかしfacebookの例により、シンプルで柔軟性に富む代わりに実際の運用が難しいです。 それではreactのContext APIをstate管理に使う際のメリットデメリットについて書きます。 メリット 1. 記述量が圧倒的に少ない。reduxの1/3。 2. stateだけでなく、変数を渡せる。 3. 可読性が高くシンプルなコードが書ける。 4. 学習コストが低い。 5. react hookのuseReducerと共に使うとかなりスケールする。 デメリット 1. ContainerコンポーネントでJSXが純粋なViewでなくなり、ネストが2段深くなる。 2. 複数のstore
typelessというReact向け状態管理ライブラリがめっちゃいい - Qiita
typelessというreactの状態管理ライブラリが非常に良いので紹介します 2019/10/24: 入門記事 書きました What is typeless? react+typescriptで使う前提のreduxラッパーライブラリ。reduxが抱える以下のような課題を解決する 異常に多いボイラープレートコード 重複した型注釈 大量の依存ライブラリ 欠如したコーディングガイドライン これらの課題を踏まえて以下のコンセプトでデザインしている TypeScriptフレンドリー 実用に耐えうる機能を全て内包する 容易なモジュール追加 多くのユースケースに対する解決策をデフォルトで提供 ＊参考： https://typeless.js.org/introduction/motivation reduxの抱える課題について ドキュメントのmotivationの項で書かれていることは多くの人が課題を
React Context APIについて - Qiita
この記事ではReact Context APIについて見ていきたいと思います。 YouTube 動画で閲覧されたい方は以下の画像リンクからどうぞ！ 背景 まずは、React Context APIの背景についてお話ししたいと思います。 Reactでは、配下のコンポーネントにデータを渡すための手段としてpropsという機能が提供されています。 ところが、このpropsを使用すると、親コンポーネントから子コンポーネントへ、さらに孫コンポーネントへ、...、といった具合で、渡したいコンポーネントまで渡したいデータをバケツリレーのように延々と渡していかなければならない弱点がありました。これをprop drilling問題と言います。 その問題を解消するべく、どのコンポーネントからでも特定のデータにアクセスできる仕組みがreact-reduxから提供されています。 Reduxを使用したことのある人な
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Theme your Expo app with Redux and React Navigation
ExpoアプリにReact Native Debuggerをセットアップする方法 [Mac OS用] - Qiita![ExpoアプリにReact Native Debuggerをセットアップする方法 [Mac OS用] - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/3243bb2f03350bdd19da0852f2fb758ef9648269/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-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9RXhwbyVFMyU4MiVBMiVFMyU4MyU5NyVFMyU4MyVBQSVFMyU4MSVBQlJlYWN0JTIwTmF0aXZlJTIwRGVidWdnZXIlRTMlODIlOTIlRTMlODIlQkIlRTMlODMlODMlRTMlODMlODglRTMlODIlQTIlRTMlODMlODMlRTMlODMlOTclRTMlODElOTklRTMlODIlOEIlRTYlOTYlQjklRTYlQjMlOTUlMjAlNUJNYWMlMjBPUyVFNyU5NCVBOCU1RCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9ZTE4ZjI5ODIwYjg5NTBlMzdkYmZkZDExMDA4MDA2Yzc%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwVGV0c3V5YTM4NTAmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWRhNDVmZGI3ODc2NWVjOWI4NDRmNjMyNTUxYTg1ZjM3%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D9828c2d24f744901ce7e710c07ffa195)
3 Things I Learned About Working with Data in Redux