Facebook製の新しいステート管理ライブラリ「Recoil」を最速で理解する - uhyo/blog
昨日、Facebook製のReact用ステート管理ライブラリRecoilが発表されました。Facebook製といってもReact公式のステート管理ライブラリとかそういう位置付けではないようですが、それでも大きな注目を集めているのは間違いありません。 そこで、筆者がRecoilに対して思ったことや、筆者の視点から見たRecoilの特徴を記事にまとめました。 なお、この記事の執筆時点では副作用の扱いなどの点はいまいち情報が揃っていません。この記事では速報性を重視し、コアのステート管理部分に絞って考えています。また、まだexperimentalなライブラリなので、今後この記事の内容からRecoilのAPIが変化したとしても悪しからずご了承ください。 この記事を書くときに筆者が色々試していたCodeSandboxはこちらです。 https://codesandbox.io/s/recoil-san
flux/ReduxのStoreの持ち方について思う事 | scratchpad
fluxもReduxもどうデータを持つかについてはあまり多く説明されてない気がします。もちろんアプリケーションによって持ち方は異なるとは思うんですが、自分用のメモとして改めて考え方を整理しておきたいと思います。 Store分割の単位：画面 vs ドメインモデル Storeを画面毎に分割すべきかドメインで分割すべきか否かという議論があると思います。個人的にはドメインモデル毎に分割して整理すべきだと考えています。過去にfluxでフルSPAを一人で開発した時は最初はある程度画面毎にStoreを分割してたんですが、すぐきつくなってきてドメインモデルで分割し直しました。 画面毎に分割すると画面が増える度にStoreを増やすことになります。しかし画面が増える度にドメインの概念やデータの種類が増えるわけではないので、この場合明らかに重複した無駄なコードを書いてる事になると思います。 もちろんアプリケーシ
ドメイン駆動Vuexで複雑さに立ち向かう
スタディスト開発部、フロントエンド担当の小宮山です。走ることが楽しくなりすぎてフルマラソン完走が当面の目標です。 今回は私達が進めているUIリニューアルプロジェクトにおける、フロントエンド設計の心臓部についてご紹介したいと思います。盛り上がりつつあるものの、まだまだ実践的な情報が少ないVue界隈に少しでも貢献できましたら幸いです。 画面駆動Vuexの頃プロジェクト始動当時は私含め大規模プロダクトにVuex（さらにその他Flux状態管理も）を導入して開発を進める経験も知見もほぼない状況でした。 そして開発していく画面デザインの大枠は出揃っている状態だったので、計画も実装も画面単位で区切って進みだしていきます。 こうした状況でVuexのstoreはどのような方針で実装されていくか。正確に表現するなら、特に方針なく実装していくとどうなるか。画面ファーストで、画面から使いやすく、画面ごとに専用なs
React-Reduxのメモ化が分からない人のためにメモ化が分かるまで説明を辞めない - Qiita
背景:React-Reduxを使うときに、メモ化が重要だと理解したので情報発信することにした 開発現場にReact-Reduxを導入しておきながら、チームメンバーから「 俺の実装したコンポーネントの描画遅いんだけどどうにかしてくれ 」と言われたので、「どうにかするのはお前の仕事だぞ♡」、と思いつつ、そうも言ってはいられない状況になったので、本腰入れてドキュメント読みました。React-Reduxのパフォーマンス改善にはどうやらメモ化が重要であると思ったので説明します。色々なサイトやドキュメントは明らかに冗長な説明が多いので、極限までエッセンシャルを絞って説明することで、ゼロ知識からでもある程度、理解できるレベルの説明に落とし込むことに挑戦しました。うちの開発チームで知見として残すために作成したものですが、需要がありそうかなと思ったので、公開します。需要がなければすみませんでした。おかしな点
React-Reduxが分からない人のためにReact-ReduxのAPIを全部説明する - Qiita
背景:React-Reduxが全然わからないのでちゃんと勉強した 開発現場にReact-Reduxを導入しておきながら、チーム全員が「 とりあえず動くと思うから実装しようぜ 」という状態だったので、本腰入れてドキュメント読みました。前回の記事の内容を把握したら一気に見通しが良くなると思ったので、説明します。色々なサイトやドキュメントは明らかに冗長な説明が多いので、極限までエッセンシャルを絞って説明することで、ゼロ知識からでもある程度、理解できるレベルの説明に落とし込むことに挑戦しました。うちの開発チームで知見として残すために作成したものですが、需要がありそうかなと思ったので、公開します。需要がなければすみませんでした。おかしな点があれば、まさかりお待ちしております。 Caveats Reduxが理解できていないと、React-Reduxの必要性が理解しにくいため、Reduxがなんなのか不安
[redux-saga]フォームに高速で入力するとガックガクになる問題 - Qiita
課題 redux-saga でテキストボックスなどの値が変更されるたびにバリデーションを実行したい時、アクションが発行されすぎて入力がガックガクになってしまうことがありますよね。 (止まっているように見えますがgifアニメです) コードはこんな感じです。 import { all, takeLatest, select, call, put } from 'redux-saga/effects' export function* validateProduct(key) { const product = yield select(productSelector) const messages = yield call(productValidator, product, key) // バリデーションして yield put(finishValidate(key, messages))
![[redux-saga]フォームに高速で入力するとガックガクになる問題 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/1a40892a78e274a4dbfeffa41228a48600157c1c/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-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCcmVkdXgtc2FnYSU1RCVFMyU4MyU5NSVFMyU4MiVBOSVFMyU4MyVCQyVFMyU4MyVBMCVFMyU4MSVBQiVFOSVBQiU5OCVFOSU4MCU5RiVFMyU4MSVBNyVFNSU4NSVBNSVFNSU4QSU5QiVFMyU4MSU5OSVFMyU4MiU4QiVFMyU4MSVBOCVFMyU4MiVBQyVFMyU4MyU4MyVFMyU4MiVBRiVFMyU4MiVBQyVFMyU4MiVBRiVFMyU4MSVBQiVFMyU4MSVBQSVFMyU4MiU4QiVFNSU5NSU4RiVFOSVBMSU4QyZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9MTFkYWY4YjlhYWQwOTg0ZmYwNDA0MTEyN2ZmMDIyNjc%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwaGl5YW1hbW90byZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9MGNkMGVkMzRlMjE4Mjk5YzYwMDllOGFkYmVmOTBmMDE%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D510c0d73e573591e91a92d607f584f2d)
Testing Common Redux Patterns in React Using AVA - Semaphore
I'm a front-end designer/developer from Zagreb, Croatia. I got into coding when I was modding Warcraft (I'm not even kidding). One of my greatest passions is bringing content to life on the web. Introduction This is the second tutorial in our series on testing React and Redux applications. If you haven’t read the first part, we encourage you to do so. Redux is a library for managing state in React
Redux/react-reduxチートシート - Qiita
Reactからの流れで、組み合わせての運用例の多いReduxを勉強してみました。 Fluxの概念、Reduxの基本機能、Reactとの連携について公式のドキュメントを中心にまとめています。 フロー自体が厳密でありながらも実装上の制約が少ない点が魅力的に思えましたが、 データモデルやUIツリーの設計、ファイル/クラス分割やディレクトリ構成などについても明確な規約が存在せず、(特にスケールを見越しての)運用方針は使い込みながら模索していく必要がありそうです。 概要 Redux = React Communityが開発しているJavaScriptフレームワーク オープンソース, MITライセンス Fluxの考え方/アーキテクチャにもとづいている 単方向にデータや処理をフローさせることで、わかりやすくフロントエンド作りましょう、という考え ユーザの操作 → View → Action → Redu
Reduxが分からない人のためにReduxを概念から説明してみる - Qiita
TL;DR 要点だけ知りたい方は、最後の方だけ読めば大丈夫です。 背景:Reduxが全然わからないのでちゃんと勉強した 開発現場にReduxを導入しておきながら、チーム全員が「全然分からない。俺達は雰囲気でReduxをやっている」状態だったので、本腰入れてドキュメント読みました。基本を押さえたら一気に見通しが良くなったので、説明します。色々なサイトやドキュメントは明らかに冗長な説明多いので、極限までエッセンシャルを絞って説明することで、ゼロ知識からでもある程度、理解できるレベルの説明に落とし込むことに挑戦しました。うちの開発チームで知見として残すために作成したものですが、需要がありそうかなと思ったので、公開します。需要がなければすみませんでした。おかしな点があれば、まさかりお待ちしております。 今回は、公式ドキュメントのBasics辺りの話まで。 Reduxの主な登場人物 Reducer
redux-saga/effectsについてメモ - 根性駆動開発
qiita.com ⬆️大体これを読めばわかるけど使用した関数や細かいメモを。 今回自分で使ったのはcall, fork, put, take, selectの五つ。 call: promiseの終了を待つ。引数にはpromiseを返す関数を入れる。 fork: 別のタスクの開始。 function*から始まる非同期関数を引数にとる。 put: actionをdispatchする。 take: action、イベントの発生を待つ。actionを待つけど引数に取るのはactionの関数ではなくてaction.typeとなる文字列。 select: stateからデータを取り出す。stateを引数にとる関数を引数にとる。 importするときは、 import { call, fork, put, take, select } from 'redux-saga/effects' のように書く。
React.js meetup #5 を開催しました - Cybozu Inside Out | サイボウズエンジニアのブログ
フロントエンドエキスパートチームの小林(@koba04)です。 2/1にReact.js meetup #5をサイボウズで開催しました。 当日は雪が降っていましたが、会場がいっぱいになるほどたくさんの人に集まって頂きましてありがとうございました。 https://reactjs-meetup.connpass.com/event/76375/ Contributing React! @koba04 最初に、まず私から「Contributing to React!」というタイトルで、Reactにコントリビュートする方法を紹介しました。 Reactにコントリビュートしようと思っても、コードが複雑でどうしていいのかわからないということもあると思います。 そのため、コントリビュートするための第一歩に必要な情報について紹介しました。 Reactでは、good first issueというラベル以外に
React Redux の SPA を運用して得られた知見と実装例、開発フローもあるよ！ - Qiita
Facebook が開発したUI ライブラリ 旧来の DOM 操作による状態管理を props や state で抽象化 パーツをコンポーネントごとに管理するのが得意 https://reactjs.org/ から、ライブデモを試せます。 SPAなどの複雑化する React のステート（状態）管理を、ルール（哲学）に従って書かせることで、フロントエンドの動きを追いやすくするためのライブラリ （*個人的解釈です） もともとは Flux と言う、データの流れを一方向に制限することで、流れを追いやすくするという、オブザーバーパターンの亜種から、さらに転じた考え方。 Redux と言う名前は 「Reducer」 + 「Flux」 で 「Redux」だそうです。array.reduce と同じような役割を Reducer が担います。詳しく知りたい方は作者の発表をご覧ください Dan Abramov
たぶんこれが一番分かりやすいと思います 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がさっぱりわかんねぇ！」 ぐらいの人向け。自分
ゼロから始めるJavaScript生活 - Qiita
（訳者注: これは、JavaScript Stack from Scratchを翻訳し、まとめて読めるように1ファイルにしたものです。元の翻訳と各種ファイルについては、日本語訳forkリポジトリを参照してください。また、原文が活発に更新されているため、訳文も追従して更新されます。ご了承ください。） モダンJavaScriptスタックチュートリアル、ゼロから始めるJavaScript生活へようこそ。 ⚠️️ このチュートリアルのメジャーアップデート版を3月初旬に公開する予定です。ご期待下さい! より詳しく(英語). これはJavaScriptスタックを使い始めるための最短最速のガイドです。このガイドは一般的なプログラミングの知識とJavaScriptの基礎を前提としています。これら全てのツールを一緒につなぎ合わせることにフォーカスしており、各ツールについて可能な限りシンプルな例を提供します。
5年間開発しているRailsプロジェクトにReact + Reduxを導入した話 by Shimpei Takamatsu | Wantedly, Inc.
こんにちは、WantedlyのWebエンジニアの高松です。 このエンジニアブログでも何度かReact関連の話題が出ていますが、WantedlyではReact + Reduxを中心としたWebフロントエンドの技術スタックを導入して開発しています。 今回はスタックの導入方法や勘所について、詳しく解説してみたいと思います。特に既存のRails環境にReactなどの導入を検討していらっしゃる方の参考になれば、と思います。 今回の内容は以前発表した以下のスライドを元にしています。 これまでのWantedlyのフロントエンド開発 まず、今回のスタック導入前のWantedlyのフロントエンド開発がどのようなものであったのかについてご説明します。 Wantedlyの開発リポジトリを参照すると、最初のコミットは2011年9月になっています。現在は社内でもマイクロサービス化の動きが始まっていますが、基本的にW
webpackで作るSprockets無しのフロントエンド開発 - クラウドワークス エンジニアブログ
こんにちは！12月に子供が生まれたばかりの鈴木( @suzan2go ) です。現在は週2~3日リモートで子供の成長を片目にみつつコードを書いています。うちの子はガラピコぷ〜がお気に入りです。 さて今回はRailsでのフロントエンド開発についてです。 昨今のフロントエンドの進化はめまぐるしく、Rails標準のSprocketsというgemでJavaScriptやCSSをコンパイルする仕組みでは以下のような要望に答えられなくなってきています。*1 ECMAScript6で書きたい！ フロントエンドのライブラリ管理にnpmを使いたい！ で、上記に対応するにはおおまかに分類すると以下のような方法があります。 browserify-rails を使う github.com これが一番導入が簡単ですし、既存のRailsアプリに突っ込むならこれが選択肢としては手堅いと思います。 ただ開発中のビルドがめ
React+Redux入門 - Qiita
※この記事を書いたのは2016年4月です。Qiitaでは記事をアップデートするとその日付のみが表示されていまうため、新しい記事のように見えるかもしれませんが、現代ではもっと進化していることにご注意ください。素直にReact Hooks を使いましょう。あと Redux は用法用量を守って気をつけて使ってください。なんならReduxは使わない方がいいでしょう。 最近のモダンなウェブフレームワークと言えば、React+Reduxですよね。でも、なんか難しそうとか、ReactってPHPみたいにViewにロジック混ざりそうとか感じて尻込みしていませんか？それはただの誤解かもしれません。React+Reduxはそんなに難易度の高いものではありません。ただ単に、新しい概念で構成されているから、カルチャーショックのようなものがある、というだけのことです。React+Reduxに入門してみましょう。 僕自
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Redux-saga pattern: flow sagas and common sagas – Hacker Noon
https://github.com/reduxjs/redux/blob/master/docs/introduction/Examples.md
Redux のディレクトリ構成を考える
