タグ

Reduxに関するhorigaのブックマーク (6)

  • react-redux の useStore を使うタイミング - fsubal

    #Redux の状態をコンポーネントから取るだけなら useSelector でよく、useStore は殆どの場合不要な API なのだが、次のようなシチュエーションで必要になった。

    react-redux の useStore を使うタイミング - fsubal
  • React + Redux + TypescriptでサンプルWebアプリ - Qiita

    こんな感じの画面が出ます。 Reduxの導入 次に、Reduxを入れます。 Reduxとは、 Stateを管理するフレームワークです。Facebookが提唱しているFluxアーキテクチャの概念を拡張して扱いやすく設計されたライブラリです。 Fluxのコンセプトはこの辺を見てください。 Reactはpropとstateを持ちますが、アプリケーションの規模が大きくなると、コンポーネント間のstate管理が難しくなります。Fluxアーキテクチャはこの問題を解決してくれます。 簡単に説明すると、以下のようなA〜Zまでのコンポーネントがあったとします。(雑な図ですみません。。。) 開発途中で、コンポーネントCとZのstateを共通化したくなった場合にstateをコンポーネントAに移植する必要がありますが、その場合、propsを渡すために依存関係のあるB、D〜Yまでのすべてのコンポーネントを修正する必

    React + Redux + TypescriptでサンプルWebアプリ - Qiita
  • React-Reduxが難しい? それは過去の話だ! ~ ToDoアプリを最小限の労力で記述する ~ - Qiita

    React-Reduxを簡単に利用するためのパッケージ@jswf/redux-moduleを利用して、最小限の労力でToDoアプリを作成するという内容です。 ※追記 @jswf/redux-moduleの使い方は以下記事で、もう少し短いソースにて確認できます React-ReduxだけどReducerもActionも書かず、Dispatchすら使わず、データも何となく受け取れるようにする方法 最初に プログラムはファイル一つだけにまとめました。 内容は以下のように構成されています。 データ構造の定義 データ操作用クラスの作成 データ入力用コンポーネント データ表示用コンポーネント 今回はReduxラッパーの機能を使うため、データの入力と表示はコンポーネントは分けてあります。 ここで見ていただきたいのは、propsもuseStateも使っていないということです。 全てのデータはReduxのS

    React-Reduxが難しい? それは過去の話だ! ~ ToDoアプリを最小限の労力で記述する ~ - Qiita
  • たぶんこれが一番分かりやすいと思います 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がさっぱりわかんねぇ!」 ぐらいの人向け。自分

    たぶんこれが一番分かりやすいと思います React + Redux のフロー図解 - Qiita
  • Reduxで非同期処理を行う~Middlewareを使って実装する方法

    対象読者 JavaScriptとWeb開発の基礎に理解がある方 Reactに興味/関心があり、これから学び始める方 前提環境 筆者の検証環境は以下の通りです。 macOS High Sierra 10.13.3 Node.js v8.9.4/npm 5.6.0 React 16.3.1 redux 3.7.2 react-redux 5.0.7 redux-thunk 2.2.0 非同期処理とRedux 格的なGUIアプリケーションを開発する上で、避けては通れないのが非同期処理です。非同期処理はネットワークやデータベースなどの時間がかかる処理を扱う場合によく用いられる手法で、GUIアプリケーションが外の世界にアクセスしようとする場合には、ほぼ必須となる概念です。 非同期処理についておさらい まずは、非同期処理について簡単におさらいしておきましょう。「非」同期的な処理であると言うからには、

    Reduxで非同期処理を行う~Middlewareを使って実装する方法
  • さよならボイラープレート。s2sによる高速reduxアプリケーション構築 - Qiita

    まだアクションクリエイターを自分で書いているの? reduxとflowtypeを使ってフロントエンドアプリケーションを構築していると、ボイラープレートが多く、面倒だと感じることがありませんか? しかし、もはや、このAST時代の前には過去の悩みでしかありません。 型を書く。それが全てです。 型を書いて、定数を書いて、アクションクリエイターを書いて、一つ変更したら全て変更して、もしくはなんらかのハックを行って型付けして、なんてものは過去のことです。 これからは、アクションクリエイターの作成に5秒以上時間をかけたら怠惰でありましょう。そして、これはs2sの1プラグインでしかありません。 プラグインを組み合わせると以下のようなこともできます。 s2s (Source to Source) これを実現している仕組みをSource to Source(s2s)といいます。 ソースコードからソースコード

    さよならボイラープレート。s2sによる高速reduxアプリケーション構築 - Qiita
  • 1