React 本体のみで Redux フレンドリーな非同期処理を実現するアイデア | Recruit Tech Blog
こんにちは。2019 年 10 月に join した kazuma1989 です。スタディサプリENGLISH の Web 版を担当するフロントエンドデベロッパーです。 今回は、React と Redux を用いたアーキテクチャーで問題になる 非同期処理 を扱うアイデアの一つをご紹介します。Redux フレンドリー と題したように、Redux でなくとも（useReducer や unstated-next でも）適用することができます。 アイデアを EffectComponent と名付けました。そもそも Redux において非同期処理の何が問題なのか、そして EffectComponent とは何か説明します。React Hooks と Redux についてある程度知っていることを前提とします。1)言語は TypeScript です。がんばらないで始める のがおすすめです Redux
React + Redux - User Registration and Login Tutorial & Example | Jason Watmore's Blog
React + Redux - User Registration and Login Tutorial & Example Tutorial built with React 16.13 Other versions available: React: React 18 + Redux, React 17 + Recoil, React 16 Hooks + 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 3 + Pinia, Vue 2 + Vuex Angu
redux-sagaで非同期処理と戦う - Qiita
はじめに ReduxはSingle Store、immutableなState、副作用のないReducerという３つの原則を掲げたFluxフレームワークです。しかし他のフレームワークと違って提供しているものは最小限で、とてもフルスタックとは言えない薄さです。そのためすべてにおいて定番と言える書き方が定まっているわけでもなく、どうしようか迷ってしまうことも少なくありません。その筆頭とも言えるのが 非同期処理 の扱いです。コミュニティでは今でもさまざまな方向に模索が続いていますが、よく使われているものだとredux-thunk、redux-promiseあたりでしょうか。Reduxに限定しないのであればreact-side-effectというものもあります。こちらはTwitterのモバイルウェブ版で使われていますね。どれを使っても非同期処理が可能になりますが、それはあくまで道具であって、設計の
React + Reduxアプリケーションプロジェクトのテンプレートを作る ― その1: Node.jsとYarnとBabelとwebpack | To Be Decided
昔、Dojo Toolkitを使ってFlashなUIをJavaScriptに書き換えた時以来、仕事でWeb UIを触ることはなかったんだけど、最近になってWeb UIを書かなければいけなくなるような気がして再学習を始めた。 題材はReact (とRedux)。 今一番人気のフロントエンドフレームワークで、昔触ったこともあるので。 前回の記事でReactが生まれた経緯を学んだので、今回から実習に入る。 (2018/11/21更新) プロジェクト作成 ちょっとCreate React Appを触ってみたけど使わないことにした。 すぐ開発始められるのはよかったんだけど、裏でなにが起こっているかわからな過ぎて肌に合わないし、使うライブラリが結構固定されちゃいそうだったし、トラブルシュート(特にライブラリのバグを踏んだ時)が大変そうだったので。 代わりに、公式で紹介されているブログ記事であるCrea
reduxをプロジェクトで使ってみた感想 - Qiita
書こうと思った気持ち reduxをとあるプロジェクトで使ってみたのだが、redux自体の存在を知った今年の夏頃はv0.4.0とかだったのに、気がついたらv3にまで上がってくるくらいの発展途上な感じのライブラリでほとんどノウハウがなく死にそうな感じだったので、使ってみた知見を公開しようと思った。 選んだ理由 reactを使ってUIを作った話をこちらに書いた。react単体はJust UIなので、アプリのフレームワークとしてfacebookが高らかに提唱しているfluxアーキテクチャを使ってみようと思った。 flux自体はデータの流れを一方向に限定しよう、というアーキテクチャであり、何をするにもまずactionがトリガーとなり、そこからアプリの状態が変更され、UIはその状態に従って描画するだけである、という思想のアーキテクチャである。 自分の過去の経験から、UI実装では状態遷移周りではまること
Redux Fundamentals, Part 5: UI and React | Redux
How a Redux store works with a UIHow to use Redux with React IntroductionIn Part 4: Store, we saw how to create a Redux store, dispatch actions, and read the current state. We also looked at how a store works inside, how enhancers and middleware let us customize the store with additional abilities, and how to add the Redux DevTools to let us see what's happening inside our app as actions are disp
ComponentとContainerについて - Qiita
はじめに react-reduxでコンポーネントとコンテナーの扱いにどういう違いがあるのかがよくわかっていなかったので、今回それぞれの違いについてまとめることで、react-reduxを使いこなせるようにしたいと思います。 今回以下を参考にしました。 https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0 Presentational Component 参考記事でreduxの作者であるDan abramobはコンポーネントを Presentational Component Container Component の２つに分類しました 一般に日本語の記事では１がコンポーネント、2がコンテナーと呼ばれているかと思います この２つについてそれぞれ解説していきます Presentational Compone
[redux] Presentational / Container componentの分離 - react-redux.connect()のつかいかた - Qiita
[redux] Presentational / Container componentの分離 - react-redux.connect()のつかいかたReactredux ReduxをReactと同時につかうときは，コンポーネントをPresentational componentとContainer componentに分離することがプラクティスの一つらしいです． このための道具としてconnect()関数がreact-reduxパッケージで提供されています． http://redux.js.org/docs/basics/UsageWithReact.html に詳しいです． 表示のみに専念するPresentational componentとロジックのみに専念するContainer componentを分離することで，コンポーネントの再利用性を高めることができる，らしいです． 自分
![[redux] Presentational / Container componentの分離 - react-redux.connect()のつかいかた - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/505b68334db31346a29fbf7189d9f6fe3c0da3e5/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-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCcmVkdXglNUQlMjBQcmVzZW50YXRpb25hbCUyMCUyRiUyMENvbnRhaW5lciUyMGNvbXBvbmVudCVFMyU4MSVBRSVFNSU4OCU4NiVFOSU5QiVBMiUyMC0lMjByZWFjdC1yZWR1eC5jb25uZWN0JTI4JTI5JUUzJTgxJUFFJUUzJTgxJUE0JUUzJTgxJThCJUUzJTgxJTg0JUUzJTgxJThCJUUzJTgxJTlGJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz05OTgyMjUxMDQ1MzRiZmRiM2QxNjdjZGI1OTg1NjI0ZA%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDB3aGl0cGh4JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1hNjg1ODQ4ZWEyZWViZDUzNzU4NzZmZDY5YzQxYzVmNg%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D1fa4d55ce4b3083ec66a426b218a7c54)
Redux入門【ダイジェスト版】10分で理解するReduxの基礎 - Qiita
ReduxのGithubドキュメントを基に入門用記事として書いたものを、簡潔にまとめました。 もと記事はこちらです。 Redux入門 1日目 Reduxとは Redux入門 2日目 Reduxの基本・Actions Redux入門 3日目 Reduxの基本・Reducers Redux入門 4日目 Reduxの基本・Stores Redux入門 5日目 Reduxの基本・Data Flow Redux入門 6日目 ReduxとReactの連携 Reduxとは Reduxは、ReactJSが扱うUIのstate(状態)を管理をするためのフレームワークです。Reactではstateの管理するデータフローにFluxを提案していますが、ReduxはFluxの概念を拡張してより扱いやすく設計されています。 Reduxはstateを管理するためのライブラリーなので、React以外にもAngularJS
Redux入門 6日目 ReduxとReactの連携(公式ドキュメント和訳) - Qiita
前回 Redux入門 5日目 Reduxの基本・Data Flow ReduxのアプリケーションはReact,Angular,Ember,jQuery, vanilla JavaScriptのいずれで作成することができます。 ReactはUIをstateの関数として扱うので特に相性がいいです。 ここからは、Reactを使ってtodoアプリに連携していきます。 Installing React Redux ReactとReduxを連携するモジュールはReduxに含まれていないので、別途インストールする必要があります。 Container and Presentational Components Reactのコンポーネントの設計として、一番上のレイヤーのコンポーネントはコンテナとしてReduxに関与し、下位のレイヤーのコンポーネントはReduxとは関与せずに、データはprop経由で受け取るよ
reduxを試してみた(5日目) - ajaxを使ってUIを構築する(reduxにおける非同期の制御) - Qiita
このページは作業ログです。やったことをつらつら書くだけなのでまとめません。あしからず。 対象読者 主に自分 今日のゴール jQueryではない方法を使ってajaxを使えるようになっていること Reactのコンポーネントを非同期リクエストで構築できるようになっていること モチベーション React.jsはビューのみをサポートしたライブラリ。サーバーとの通信部分はなんも用意していない チュートリアルではjQueryを使ってサーバーと通信してた。でもjQueryはその他もろもろいろいろ機能がある。Virtual DOMとの相性がありそうなので、jQuery自体導入せずに済ませられるのならそうしたい。 調べてみた A Comparison of JavaScript HTTP Libraries for the Browserという記事によると、Ajaxリクエストを実現するには下記の方法がある。
【５分でできる】ReactにRouterとRudexをサクッと設定する方法
フロントエンド 4307 view 【５分でできる】ReactにRouterとRudexをサクッと設定する方法 最終更新日:2018/09/20 はじめに Reactはビューを構成するためのライブラリであり、SPAアプリケーション開発に欠かせないルーターをデフォルトで持っていません。また複雑なアプリケーションを構築するためにはReduxの状態管理も必要となるため、初期の段階でサクッと導入する必要があります。 本記事ではReactにReduxとRouterを導入して接続する方法を徹底解説します！ 使用するパッケージ redux react-redux react-router-dom react-router-redux ディレクトリ構造 必ずこのようにしなければいけないわけではありませんが、reduxを採用したreactアプリケーションの一例だと思ってください。 プロジェクト作成 crea
何のためにreact-router-reduxを使うのか復習しようとしたら、deprecatedになっていた - Qiita
何のためにreact-router-reduxを使うのか復習しようとしたら、deprecatedになっていたJavaScriptReactreact-routerredux 概要 なんとなくの理解で使っているreact-router-reduxを復習しようと思い立ったところ、今やreact-router-reduxはdeprecatedになっていました。あらー。 今、React Routerのドキュメント（Redux Integrationのページ）を見ると、代わりにConnected React Routerというライブラリが紹介されています。 とはいえ、React RouterとReduxの統合は何のためか、という目的はどちらのライブラリもそう変わらないはずですので、この機会に復習していきます。 その上で、今度からはConnected ... の方を使おうと思います。 現状、こんな風に
React/Redux約三年間書き続けたので知見を共有します | Enigmo Life
Enigmo Advent Calendar 2018の4日目の記事です。 この記事の目的 Enigmoが運営しているBUYMAでは古代から運用しているjQueryの他に、2016年頃から一部ページのフロントエンドをReact/Reduxで構築しています。 私自身もEnigmoに入社してからの約三年間でReact/Reduxアプリケーションの開発に多数携わってきましたので、そこで培った知見を共有したいと思います。 React/Reduxの利点 まずはじめに、ReactとReduxを使うメリットを再確認しておきたいと思います。 それぞれのメリットをしっかりと認識しておくことで、実装する際どう書くか迷ってしまった場合などにそのメリットを最大限活かす選択をすることができます。 Reactの利点 コンポーネント化が容易で再利用性が高い 状態をDOMから分離できる(Stateless) Reduxの
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
