Reduxが分からない人のためにReduxを概念から説明してみる - Qiita
TL;DR 要点だけ知りたい方は、最後の方だけ読めば大丈夫です。 背景:Reduxが全然わからないのでちゃんと勉強した 開発現場にReduxを導入しておきながら、チーム全員が「全然分からない。俺達は雰囲気でReduxをやっている」状態だったので、本腰入れてドキュメント読みました。基本を押さえたら一気に見通しが良くなったので、説明します。色々なサイトやドキュメントは明らかに冗長な説明多いので、極限までエッセンシャルを絞って説明することで、ゼロ知識からでもある程度、理解できるレベルの説明に落とし込むことに挑戦しました。うちの開発チームで知見として残すために作成したものですが、需要がありそうかなと思ったので、公開します。需要がなければすみませんでした。おかしな点があれば、まさかりお待ちしております。 今回は、公式ドキュメントのBasics辺りの話まで。 Reduxの主な登場人物 Reducer
React Redux Real World Examples 〜先人から学ぶReact Reduxの知恵〜
React Reduxを使ってプロダクトを作りはじめて、かれこれ半年くらい経ちます。 しかし、どうもうまく書けていない気がすることがときどきあり、悩んでいたところ、ツイッターで次のような助言をもらいました。 @__tai2__ 達人かどうかは微妙なところがありますが、ある程度の規模のコードはここにリンク集あります https://t.co/B79B5s1DTe — Yuki Kodama (@kuy) 8 December 2016 この記事は、上記のリンク集でまとめられている実際のReact Reduxプロダクトのソースコードを調査することで、筆者がふだんReact Reduxで開発をしていて感じる疑問への答えを探る試みです。 筆者が答えを得たいと思っている疑問は次の3つです 1 Storeはどんな具合に階層化すべきか Store初期化(hydration)用データの定義はどうすべきか
アメブロでReactやIsomorphic Web Applicationを採用した理由――その成果と構成技術
アメブロでReactやIsomorphic Web Applicationを採用した理由――その成果と構成技術：大規模ブログサイト表示速度改善 大解剖（1）（1/2 ページ） 2004年から続くブログサービス「アメブロ」が2016年9月にシステムをリニューアル。本連載では、そこで取り入れた主要な技術や、その効果を紹介していく。初回は、Isomorphic Web Applicationについて。 2004年から続くブログサービスである「アメブロ」は、2016年9月にシステムをリニューアルしました。本連載「大規模ブログサイト表示速度改善 大解剖」では、そこで取り入れた主要な技術や、その効果を紹介していきます。連載第1回では、Isomorphic Web Applicationについてお伝えします。 Amebaでは、これまでリッチなユーザー体験を実現するために、さまざまな取り組みをしてきました
ReduxでのMiddleware不要論 - Qiita
問題提起 （※タイトルはキャッチーなのにしましたが、Middleware全般の不要論ではありません。非同期処理において不要論です。） Redux使うときに非同期処理はどう書きますか？ 「よくわからないけどMiddleware使うらしい」と思考停止していませんか？ この記事では、Reduxは本来どのように扱うことを想定されているのかと、なぜ非同期処理の文脈でもMiddlewareが出てきたのか、そして「実はMiddleware無くても読みやすく書けるよね」という話をしていこうと思います。 Reduxでの設計を悩む人への個人的な解です。 （気になる・詳しく知りたい箇所などありましたらお気軽にコメントください） この記事のゴール ActionDispatcherという筆者が命名したクラスを使うことで、 複数の非同期処理を含むロジックでも読みやすく書ける ネットワーク通信などを含んでもテストがしや
Reduxの正しい解釈の話
2016年の課題は状態遷移の管理だったと思う。 そのアンサーとして、 Fluxのような実装におけるStore相当にアプリケーションの状態をほぼすべて管理させるReactのようなVirtual DOMを搭載したビューの実装を透過的なユーザーインターフェースとして扱うこの2つの組み合わせにより、アプリケーションの状態と描画される画面が (ほぼ) 参照透過的になる。というのがFluxとReact以降のパラダイムだと思う (理論として) 。 このパラダイムなら、エラーの発生時にアプリケーションの状態を表現するJSONをエラー収集サービスに送るようにして、簡単にバグを再現したりできるし、状態の遷移をテストしていくことで、クラッシュするようなバグのうち大半を検出できる。 Fluxの問題そこで問題が出るのが、Action(Creator) とReducer (Store#reduce())の2要素間のル
Modern JavaScript概観、そしてElectronへ | さにあらず
この一か月分の学習成果を整理したリポジトリを作ったので、その成果についてまとめておく。 作ったサンプルプロジェクトだけを手軽に欲しければ、このリポジトリを clone してほしい。 taichi/js-boilerplatemaster ブランチには、ミニマムな JavaScript 開発環境がサンプルコード付きで入っているfrontend ブランチには、React/Redux/webpackなウェブアプリケーション用の開発環境が入っているデフォルトブランチにしてある electron ブランチには、frontend ブランチの内容に加えてElectronでアプリケーションを開発するための環境が入っているはじめに#最近の JavaScript について#僕は仕事として JavaScript を書いている訳ではないけども、この半年くらいの間にちょっとしたツールならいくつか作った。どちらも便利
アメブロ2016 ~ Isomorphic JavaScriptの詳しい話 | CyberAgent Developers Blog
問題点はIsomorphic実装難易度です。では、アメブロのIsomorphicの実装方法と実装する際にあった問題及びその解決策をお伝えします。 ちなみに、Michael Jackson氏はIsomorphic JavaScript ではなく、 Universal JavaScript と呼ぶべきだと主張しています。私たちはIsomorphic JavaScriptという名前で使うのに慣れたので、ここでは*Isomorphic JavaScriptと記述します。 AmebloのIsomorphic 技術選定 先に結論をあげます：React + Redux 技術選定の基準は下記となります。 安定さ。基本的にプロダクト環境で使える正式版があること。 アクティブな開発。 よいコミュニティ。技術の周りに大きいコミュニティが育っていること。 実績がある。 まずView層のライブラリの選定です。このプ
たぶんこれが一番分かりやすいと思います 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がさっぱりわかんねぇ！」 ぐらいの人向け。自分
Reduxの実装とReactとの連携を超シンプルなサンプルを使って解説
玉石混合状態にあったFluxのフレームワークも、ここ最近ではReduxが首一つ抜け出したような感じとなっています。自分はFacebook/Flux派ではありましたが、先月発売された『WEB+DB PRESS vol.92』に掲載されていた伊藤直也さんのReduxの記事を読んで、Reduxを覚えてみようという気になりました。Redux自体はとてもシンプルで、とっつきやすいと思いました。ただReactとの連携はFacebook/Fluxと比べるとややこしい部分が多いかなといった印象です。ちょっとしたサンプルを作ってみたので、Reduxの実装方法とReactとの連携について紹介したいと思います。 ReduxとはReduxは、Facebookの提唱するFluxアーキテクチャに基づいて（影響を受けて）設計されたJavaScriptフレームワークです。作者は@dan_abramov氏。 reactjs
【React-Redux】webpackで環境構築編 [初心者入門1日目] | Hirooooo’s Labo
React × Reduxの連載記事を投稿していこうと思います。 第一回目はサラのMacに環境構築を行っていきます。 webpack4.42を使用してreact-reduxのsampleが動くところまでやってみたいと思います。 とりあえずプラグインやライブラリ等は追々検討していきますので、目指すは最小構成のreact redux環境となります。 React16.8からはフック(hook)が使えるようになったので、基本classではなくフックを利用して作成していきます。 基本的に独学なので、よくわかってないで書いてる部分もすごいあります。 間違いとかあったらコメントとかで教えてくれると嬉しいです。 これからReactを勉強したいなーって思ってる人の少しでも参考になれば嬉しいです。
![【React-Redux】webpackで環境構築編 [初心者入門1日目] | Hirooooo’s Labo](https://cdn-ak-scissors.b.st-hatena.com/image/square/c10f1e4cfe998e6d6079b1d6f04ac783907dabc1/height=288;version=1;width=512/https%3A%2F%2Fhirooooo-lab.com%2Fwp-content%2Fuploads%2F2020%2F03%2Freact-redux-setup-environment-1.jpg)
俺のReduxがフレームワークなわけがない - Qiita
今回は、いかにReduxがフレームワークではなくライブラリであるか、 というのを感じてもらう内容になっています。 Reduxは大変？ 皆さんReduxに興味はありますか？ Reduxの記事を読んでみたり、実際に試したことがある人は 「たくさん覚えるものがある」 「結構難しい」 「React使わないといけないし使い方が限定される」 そんな印象を受けたんじゃないでしょうか。 私は仕事でReact+Reduxを使っているんですが、なかなか難しいなぁと感じています。 ES2015、React、Webpack、Babel、そのほかのReduxをサポートする様々なライブラリ・・・ 多くのものが合わさった結果、「Reduxは大変だ」という印象を抱くに至りました。 Reduxはすごく小さい 余計なものが多くあるせいで複雑に感じるRedux。 ですが、Reduxだけでコードを書くと、こんな風になります。 b
redux-sagaでReduxのルーティングを制する - Qiita
3行で言うと react-router はただのコンポーネント切り替え react-router-redux はロケーション情報をストアに同期するだけで、コンポーネントを表示する前にデータ取得する方法を提供しない redux-saga を使えば最高のルーティングが実現できるのでは？ → redux-tower を開発中 リポジトリ: https://github.com/kuy/redux-tower デモ：http://kuy.github.io/redux-saga-tower/blog/ はじめに 「redux-sagaでReduxのルーティングを制する（ｷﾘｯ」とか言っちゃいましたが、まだライブラリをリリースできていませんし、実務で使っているわけでもありません。本当に制しているかどうかはこれから使っていって改良も加えつつって感じです。redux-saga を使う時点でそっと閉じる人
複数の作用がセットのAction発行とどう向き合うか - Qiita
Redux を仕事と個人で使い始めて 3・4 週間という経験値なのですが、「唯一の状態である state の唯一の更新手段である Action 発行」が、更新以外の作用を伴うことに頭を悩ませていて、この点についてのお話をさせてもらいたいと思います。 なお、前提とする Redux ミドルウェアや周辺ライブラリは、公式推奨である以下です。 redux-thunk React react-redux Action 発行に伴う 3 つの作用 Redux の Action 発行（＝ dispatch の実行）は、以下の 3 つの作用をセットで実行する処理だと、自分は考えています。 state の更新をする。 state のコピーをする。1 描画を実行する。つまり React の render 関数を実行する。2 それらの作用は常に全てが必要ではない それぞれは勿論必要な処理ですが、常にセットで必要と
arco Index
arco 0.1.3 A React+Redux framework with standards, conventions, and far less boilerplate Documentation Installation $ npm i arco --save Summary arco is a framework designed to streamline a lot of the architectural configuration of a React application by providing several web-standard packages built-in, as well as an API that is built to keep boilerplate minimal. The following packages are all incl
reselectでReact Reduxにvalidationの仕組みを実装する 1/2 - Qiita
※ 2019/06/12追記: React Hooksのなかった時代の投稿です。2019/06/12 現在のスタンダードが他にないかよく調べてから読んでください。 本記事はSupership株式会社 Advent Calendar 2016の7日目の記事になります。 株式会社Socketの @notsunohito です。 株式会社SocketはSupership株式会社と同じSyn.グループのメンバーであり Web接客と呼ばれるサービスのひとつであるFlipdeskを展開しています。 今回はFlipdeskの管理画面の一部をReact Reduxで書き直したときに validationを実装するのに利用したライブラリreselect について本日7日目と8日目を2回にわけて書きます。 TL;DR reselectでvalidationを作ってみたら割りと良かった。 本記事で扱うサンプル全
React with Reduxによる大規模商用サービスの開発 / nodefest2016
東京Node学園祭2016で話したブッキングテーブルのやつ
Reduxのパターンとアンチパターン | POSTD
Redux は、 Flux のようなアーキテクチャを使用してアプリケーションの状態を管理できる非常にシンプルなライブラリです。私たち Affirm では今、 Reduxのタイムトラベル機能 に注目しています。Affirmの主要事業は、透明性の高い消費者ローンを提供することなので、ローン申し込み時の全過程をユーザ視点で再現できると非常に有用なのです。 Reduxはフレームワークというよりも、パターンの適用に役立つ関数セットです。よって、適切なパターンを慎重に適用しないと、Reduxを使ったことを後悔する結果になりかねません。この記事では、Affirmで確立したReduxのベストプラクティスや、ミスを犯しやすいポイントについて説明します。 ImmutableJS ImmutableJS は、不変の永続データ構造を扱うためのライブラリです。私たちがこのライブラリを好んで使う理由は2つあります。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TwitterによるReactベースのモバイルWebスタックはネイティブのパフォーマンスに匹敵する
React Redux テスト考察 - Qiita
DeNA Engineering - DeNAエンジニアのポータルサイト
