Help us understand the problem. What is going on with this article?
![[archived] ReduxのFAQを読み直す - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/9cecdcd708b5f1a1aa30e8bda46680db96e4a76a/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-1150d8b18a7c15795b701a55ae908f94.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark%3Dhttps%253A%252F%252Fqiita-user-contents.imgix.net%252F~text%253Fixlib%253Drb-4.0.0%2526w%253D840%2526h%253D380%2526txt%253D%25255Barchived%25255D%252520Redux%2525E3%252581%2525AEFAQ%2525E3%252582%252592%2525E8%2525AA%2525AD%2525E3%252581%2525BF%2525E7%25259B%2525B4%2525E3%252581%252599%2526txt-color%253D%252523333%2526txt-font%253DHiragino%252520Sans%252520W6%2526txt-size%253D54%2526txt-clip%253Dellipsis%2526txt-align%253Dcenter%25252Cmiddle%2526s%253Dd1baaa3909e6cb9b02d85abb1e1f516d%26mark-align%3Dcenter%252Cmiddle%26blend%3Dhttps%253A%252F%252Fqiita-user-contents.imgix.net%252F~text%253Fixlib%253Drb-4.0.0%2526w%253D840%2526h%253D500%2526txt%253D%252540terrierscript%2526txt-color%253D%252523333%2526txt-font%253DHiragino%252520Sans%252520W6%2526txt-size%253D45%2526txt-align%253Dright%25252Cbottom%2526s%253Ded893b7eabdaa75da91d28680de5bf50%26blend-align%3Dcenter%252Cmiddle%26blend-mode%3Dnormal%26s%3Df5a6c1ac9dd5d9d955e5c24ed444a900)
Enigmo Advent Calendar 2018の4日目の記事です。 この記事の目的 Enigmoが運営しているBUYMAでは古代から運用しているjQueryの他に、2016年頃から一部ページのフロントエンドをReact/Reduxで構築しています。 私自身もEnigmoに入社してからの約三年間でReact/Reduxアプリケーションの開発に多数携わってきましたので、そこで培った知見を共有したいと思います。 React/Reduxの利点 まずはじめに、ReactとReduxを使うメリットを再確認しておきたいと思います。 それぞれのメリットをしっかりと認識しておくことで、実装する際どう書くか迷ってしまった場合などにそのメリットを最大限活かす選択をすることができます。 Reactの利点 コンポーネント化が容易で再利用性が高い 状態をDOMから分離できる(Stateless) Reduxの
はじめに react-reduxでコンポーネントとコンテナーの扱いにどういう違いがあるのかがよくわかっていなかったので、今回それぞれの違いについてまとめることで、react-reduxを使いこなせるようにしたいと思います。 今回以下を参考にしました。 https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0 Presentational Component 参考記事でreduxの作者であるDan abramobはコンポーネントを Presentational Component Container Component の2つに分類しました 一般に日本語の記事では1がコンポーネント、2がコンテナーと呼ばれているかと思います この2つについてそれぞれ解説していきます Presentational Compone
Facebook が開発したUI ライブラリ 旧来の DOM 操作による状態管理を props や state で抽象化 パーツをコンポーネントごとに管理するのが得意 https://reactjs.org/ から、ライブデモを試せます。 SPAなどの複雑化する React のステート(状態)管理を、ルール(哲学)に従って書かせることで、フロントエンドの動きを追いやすくするためのライブラリ (*個人的解釈です) もともとは Flux と言う、データの流れを一方向に制限することで、流れを追いやすくするという、オブザーバーパターンの亜種から、さらに転じた考え方。 Redux と言う名前は 「Reducer」 + 「Flux」 で 「Redux」だそうです。array.reduce と同じような役割を Reducer が担います。詳しく知りたい方は作者の発表をご覧ください Dan Abramov
問題提起 (※タイトルはキャッチーなのにしましたが、Middleware全般の不要論ではありません。非同期処理において不要論です。) Redux使うときに非同期処理はどう書きますか? 「よくわからないけどMiddleware使うらしい」と思考停止していませんか? この記事では、Reduxは本来どのように扱うことを想定されているのかと、なぜ非同期処理の文脈でもMiddlewareが出てきたのか、そして「実はMiddleware無くても読みやすく書けるよね」という話をしていこうと思います。 Reduxでの設計を悩む人への個人的な解です。 (気になる・詳しく知りたい箇所などありましたらお気軽にコメントください) この記事のゴール ActionDispatcherという筆者が命名したクラスを使うことで、 複数の非同期処理を含むロジックでも読みやすく書ける ネットワーク通信などを含んでもテストがしや
Dave Ceddia氏によるRedux vs. The React Context APIを本人の許可を得て意訳しました。 誤りやより良い表現などがあればご指摘頂けると助かります。 原文: https://daveceddia.com/context-api-vs-redux/ React 16.3は新Context API(旧Context APIはほとんど知られておらず、また非推奨であったことから、生まれ変わったと言っても良いでしょう)を追加しました。 Context APIはReactの第一級オブジェクトとして公式のものとなったのです。 React 16.3 が登場するや否や、Context APIがもたらすReduxの終焉についての記事がWeb上を賑わせました。しかしReduxは言うでしょう、「私が死ぬだって?馬鹿馬鹿しい」と。 この記事では、新Context APIの機能、Re
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: When (and when not) to use Redux – LogRocket 原文公開日: 2018/01/20 著者: Christian Nwamba サイト: LogRocket 2018/03/13: 初版公開 2021/06/03: 更新 Reduxが登場するまで、複雑なタスクを組むときのステート管理は相当つらい作業でした。Reduxは、Fluxというアプリケーションデザインパターンにヒントを得て、JavaScriptアプリでステートを管理するために設計されました。ReduxはReactと併用されることが多いのですが、ReduxはjQueryやAngular、Vueといった別のフレームワークとも併用できます。 Reduxのサイズは非常に小さい(依存関係も含めてわずか2KB)にもかかわらず、アプリの各コンポーネ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く