React ステート管理 比較考察 - uhyo/blog
こんにちは。Reactの話題の中でもかなりの部分を占めるのがステート管理、さらに言えば各種のステート管理ライブラリです。今さらながら、Reactにおけるステート管理の手法やいくつかのステート管理ライブラリを比較考察して記事にまとめました。 useState + バケツリレーReactにおける基本的なステート管理はuseStateです。ひとつのコンポーネント内で完結するようなステートならばuseStateは非常に適しており、他の選択肢はほぼ無いと言っても構わないでしょう。 ステートをアプリケーションの広範囲で使いたい場合が問題です。次の画像に例示されるように、分岐したコンポーネントツリーの末端のコンポーネント（使用者）で同じステートを参照したい場合を考えます。 useStateと組み合わせる場合、もっとも原始的な方法はpropsのバケツリレーによるものです。propsは親コンポーネントから子
Redux ToolkitのcreateAsyncThunkで非同期処理を実装する方法 | Enjoy IT Life
createAsyncThunkについて createAsyncThunkとは非同期処理の実行状況に応じたActionCreatorを生成する関数です。 createAsyncThunkは2つのパラメータを持ちます。 第1引数はtypePrefixと呼ばれる文字列です。typePrefixはActionTypeの接頭辞として利用されます。 第2引数はpayloadCreatorと呼ばれるasync関数（Promiseを返す非同期処理の関数）です。 createAsyncThunkはasync関数で処理されるPromiseの状態に応じたActionCreatorを返します。 createAsyncThunkに関する戻り値 createAsyncThunkによって作成されるActionCreator、およびActionCreatorがdispatchするActionオブジェクトの値について紹介
What is a Redux selector?
I was tasked with helping to build out the Redux architecture of a single page application at work. I have built plenty of projects with Redux, but never had to seriously consider performance at scale until this application. As I began doing some research, I repeatedly ran across “selectors”, but had no clue what they were. This article will answer that question for you and hopefully help you dete
Using Immutable.JS with Redux - Redux
Redux Style GuideIntroductionThis is the official style guide for writing Redux code. It lists our recommended patterns, best practices, and suggested approaches for writing Redux applications. Both the Redux core library and most of the Redux documentation are unopinionated. There are many ways to use Redux, and much of the time there is no single "right" way to do things. However, time and expe
Fluxとは何か MVC, MVVMとの違いも含めて - See the Elephant
動機 仕事で, React + Redux + TypeScirpt + WebPackを使うことになりそうなので学んでいく. そもそもjsに疎いので探り探りやっていく. 間違えもあるかもしれないが, 徐々にやっていこう. TL;DR Fluxとは, アプリケーションのデータフロー管理のためのアーキテクチャパターン イベント駆動であり, 一方向のデータフロー制御を行う Fluxの特徴は, Viewで独立したデータを持つ, データ状態を一方向のフローで制御, Event駆動である. FluxはAction, Dispatcher, Store, Viewの4要素で構成される. Reduxとは Reduxとは, Facebookが提唱, 開発しているJsApp. jsにおいて, データの状態(データの流れ)を管理するためのツールである. ReduxはFluxの実装と聞いたことがあるので, Re
Reduxでのディレクトリ構成3パターンに見る「分割」と「分散」
Reduxでのディレクトリ構成3パターンに見る「分割」と「分散」投稿者: hahnah 投稿日: 2019-09-262019-09-26 Redux を使っていいて、ディレクトリ構成に悩んだことはないだろうか。 もしくは、見かけるディレクトリ構成が多様で、どれがいいのか分からないなんてことはなかっただろうか。 この記事では Redux を用いる際の代表的な３パターンの構成を紹介するとともに、それぞれをソースコードの分割・分散の度合いで比べてみる。 redux-way ducks re-ducks パターン1. redux-way (あるいは Rails-style) redux-way では、 “Redux によって導入される概念” ごとにディレクトリを分ける。 以下のようにcomponents/,containers/,reducers/,actions/,types/などとディレクト
redux-thunkを学ぶ - 豆腐とコンソメ
Reduxに慣れ始めたのであらためてredux-thunkをちゃんと理解しようと思う。 redux-thunk まずは基本 非同期処理 middlewareを使う redux-thunk redux-thunk github.com redux-thunkは以下のように非常にシンプルなコードでつくられている。 魔法のようなredux-thunk function createThunkMiddleware(extraArgument) { return ({ dispatch, getState }) => next => action => { if (typeof action === 'function') { return action(dispatch, getState, extraArgument) } return next(action) } } const thunk
[React] Ducks というデザインパターン [Redux]
Ducks というデザインパターン Reduxのファイル構成は『Ducks』がオススメ – Qiita The Ducks File Structure for Redux – S.C. Barrus – Medium erikras/ducks-modular-redux: A proposal for bundling reducers, action types and actions when using Redux Redux Way React + Redux で構築する際のディレクトリ構成としてよく知られるのは、redux-way と呼ばれるやつです。Reduxの登場人物であるところの、container, reducer, action(action creator) それぞれについてディレクトリを分けてファイル単位で分割します。ディレクトリ構成はこんな感じになります。 s
![[React] Ducks というデザインパターン [Redux]](https://cdn-ak-scissors.b.st-hatena.com/image/square/39345b783600478f9f7560588281a42a5162c520/height=288;version=1;width=512/https%3A%2F%2Fwebbibouroku.com%2Fwp-content%2Fuploads%2Feye_javascript.png)
React-Redux をわかりやすく解説しつつ実践的に一部実装してみる - 筋肉とエンジニアリングで すべてを解決するブログ
全くわからない こんにちは。 ここ1〜2週間くらい React と Redux 触ってるんですが、あまりにもまともなドキュメントがなく、どう動かして良いのかわからなかった状態でした。 しかし、色々仕組みを追っているうちに「こんな感じで書けばいいのでは」というのがわかってきたので僕の言葉&コードでまとめてみようと思います。 独自の解釈かも知れない部分があるので、変なところはコメントいただけると助かります。 まず React について React についてはたくさん書かれてるのと、ふぅん〜くらいに流してもだいたいなんとかなるので端折ります。 qiita.com 上記の基本〜コンポーネントの使用くらいまで読んだらだいたいOKです。 重要なのは、 （MVCで言うところの）Viewのみを担当する。 JavaScriptのコード中に（PHPの様に）「HTMLタグ(っぽいもの)」を書ける。 ここらへん。
イメージで覚えるReact + Redux - ユニファ開発者ブログ
こんにちは、tanaka です。 Rails5.1で Webpacker が導入されて React や Vue.js などのフロントエンド技術がさらに身近になりました。ヽ( ´￢`)ノ ということで、早速 Rails5.1 + React + Redux でちょっとしたアプリを作ってみるぜ !! とコーディングを始めたところ、 ・・・・ ちょっと昔に ReactNative を勉強したときに使ったはずの Redux をガッツリ忘れているではありませんか …。 (ﾉﾟοﾟ)ﾉ そんな忘れん坊な私のためにReact + Reduxを復習し、今度こそ忘れないぞと誓うとともに記事としてまとめました。 React + Reduxの参考記事 React + Reduxについては詳しい記事がたくさんあります。 私も数回読みました。どれも分かりやすくて良い記事だと思います。 Redux入門【ダイジェスト版
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
How Redux Connect compares to the new Redux Hooks.