[B! redux][react] mizdraのブックマーク

mizdra id:mizdra

reduxとreactに関するmizdraのブックマーク (18)

Redux Toolkit | Redux Toolkit
Includes utilities to simplify common use cases like store setup, creating reducers, immutable update logic, and more.
mizdra 2020/05/04
react

redux

javascript
リンク
React+Fluxアプリケーションにpropsバケツリレーは必要か
React+Fluxアプリケーションのメンテをしている中で「propsのバケツリレーを減らすためにContainerを増やしてもよいか？」というディスカッションになったので、考察をまとめてみます。いまの設計の確認 FluxUtilsフレームワークを利用している複数のStoreを持つ ComponentTreeのRootをContainerとし、StoreのStateを受け取る Tree状に配置された各Componentにはprops経由で状態を受け渡す各Componentはローカルステートを持つことができるちなみに、ここで言うFluxの定義については「React+Fluxで正しく設計するためのFlux見直しガイド」にてまとめています。 propsのバケツリレーと単一Containerとは？ Reactアプリケーションでしばしばある「ComponentTreeのRootでアプリケーシ
mizdra 2019/04/17
react

flux

redux

設計
リンク
typescript-fsaに頼らないReact × Redux
2018年11月1日、株式会社メルカリにて「React会」が開催されました。第1回となる今回は、5人のエンジニアがReactにまつわるさまざまなトピックスについてライトニングトークを展開しました。プレゼンテーション「typescript-fsaに頼らないReact × Redux 」に登壇したのは、日本事務器株式会社の甲斐田亮一氏。講演資料はこちら typescript-fsaに頼らないReact × Redux 甲斐田亮一氏：「typescript-fsaに頼らないReact × Redux」というタイトルで始めさせていただきます。僕は日本事務器という会社でフロントエンドエンジニア兼デザイナーをしている甲斐田といいます。ふだんの業務で、React、TypeScriptでアプリケーションを書いています。今回話すことですが、最近のTypeScript 2.8以降の機能を使って、React
mizdra 2019/02/12
知見が詰まっている

typescript

javascript

react

redux
リンク
雰囲気でやってる人向けの Redux 再入門
ng-kyoto Angular Meetup #9 での発表資料です。 https://ng-kyoto.connpass.com/event/113358/
mizdra 2019/01/20
分かりやすい

redux

javascript

react
リンク
フロントエンドのコンポーネント設計に立ち向かう - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? ReactやVueなどコンポーネントベースで作っていくViewのライブラリが普及したことで、コンポーネント指向での開発が一般化してきた昨今のフロントエンドですが、このコンポーネントの設計に悩まれる方も多いのではないでしょうか。コンポーネントをどの粒度、どんな状態で分割するのが良いのか、などなど、特にチームで開発する時に認識が揃っていないとカオスになりがちな部分であると思うので、自分なりの設計をする際の指針を言語化しようというのが本記事の目的です。同じように悩まれている方にも何らか示唆を提供することができたら嬉しいです。想定読者「コ
mizdra 2018/05/07
javascript

redux

設計

react

vue.js
リンク
GitHub - piotrwitek/react-redux-typescript-guide: The complete guide to static typing in "React & Redux" apps using TypeScript
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
mizdra 2018/02/17
redux

react

javascript
リンク
React + Redux- Animation - - DeNA Design
デザイン戦略室フロントエンドエンジニアの吉井です。昨今の React 実装は、StatelessFunctionalComponent(SFC)を用いて Flux や Redux に状態管理を委譲するデザインパターンが定着していますね。アプリケーションの UX に欠かせないアニメーションですが「SPA とは相性が悪い」という噂を聞いたことがあります。従来の html アニメーションといえば jQuery.animate によるものが定番ですが、jQuery.animate は以下の理由で React と相性が悪いです。 jQuery を使用しないことがほとんどで、ほかライブラリに頼る必要がある。 DOM 参照(ref 参照)のために SFC を諦めないといけない。 Animation 実行中に component を unmount すると参照エラーになる。 Animation の状態を
mizdra 2018/01/18
redux

animation

react

javascript
リンク
はてブviewer『Pasta』をReact + Reduxで作って公開した - undefined
概要自分用に使い勝手の良い、はてブviewerをReact/Reduxで作って公開しました。 ※GoogleFeedAPI停止につき現在利用できません。申し訳ありません。 Pasta - Hatena Bookmark Viewer - ひとまず復旧したようです。デスクトップ版をもご利用ください。 blog.bokuweb.me スクリーンショットどんなものか登録したキーワードに関連するニュースを配信する『Zite』というアプリがあるんですが、配信される記事が英語のみなので、こいつの日本語版を作ろうと思い着手しまた。当初はReact Nativeでスマホアプリを作り始めたんだけど、先にWEB版を作ってしまったほうが変なところで躓かずにすむんじゃないかと思い、こちらを先に実装することにしました。ただリリース直前で気づいたんですが、公式にも同様の機能の『関心ワード』なるものが実装され
mizdra 2017/09/22
react

redux

javascript

service&tool
リンク
Reduxのパターンとアンチパターン | POSTD
Redux は、 Flux のようなアーキテクチャを使用してアプリケーションの状態を管理できる非常にシンプルなライブラリです。私たち Affirm では今、 Reduxのタイムトラベル機能に注目しています。Affirmの主要事業は、透明性の高い消費者ローンを提供することなので、ローン申し込み時の全過程をユーザ視点で再現できると非常に有用なのです。 Reduxはフレームワークというよりも、パターンの適用に役立つ関数セットです。よって、適切なパターンを慎重に適用しないと、Reduxを使ったことを後悔する結果になりかねません。この記事では、Affirmで確立したReduxのベストプラクティスや、ミスを犯しやすいポイントについて説明します。 ImmutableJS ImmutableJS は、不変の永続データ構造を扱うためのライブラリです。私たちがこのライブラリを好んで使う理由は2つあります。
mizdra 2017/08/07
redux

javascript

react
リンク
あなたはReduxを必要としないかもしれない – You Might Not Need Redux by Dan Abramov | mae's blog
今回は、エンジニア向け読み物サービス「Mybridge」のMybridge AIがランク付けした2016年9月のReactに関する記事の1位だった記事を翻訳して紹介します。Reduxの作者Dan Abramov氏の記事です。内容は、簡単に言うと、「無理してReduxを使わなくてもいいよ」という話です。ただ、使わなくてもいい理由をReduxの特徴を挙げながら述べてくれているので、Reduxについての理解も深まる内容になっています。原文がだいぶフランクな感じで書かれているので、日本語に訳すのが少々難しく、わかりにくい部分もあるかと思いますが、是非読んでみてください。当記事は、You Might Not Need Redux – Medium　(Sep 20, 2016) by Dan Abramovを日本語に翻訳したものです。人々はReduxを必要とする前からReduxを使おうとします。「
mizdra 2017/08/06
redux

react
リンク
なぜReduxを使うのか
From Subtype Polymorphism To Typeclass-based Ad hoc Polymorphism�- An Example
mizdra 2017/02/23
redux

react

javascript
リンク
静的型チェッカーflowでReact+Reduxのサンプルアプリを組んでみた - Namiking.net
JavaScript型チェッカーflowを使って、React+Reduxで簡単なカウンターのサンプルアプリケーションを組んでみたので、その際のいくつかのポイントなどをまとめておきます。サンプルアプリについてボタンを押したら数字がインクリメントされるタイプのよくあるサンプルプログラム。 GitHub: namikingsoft/react-redux-using-flow-example https://github.com/namikingsoft/react-redux-using-flow-example ソース周りのファイル構成 react-redux-using-flow-example |-- src | |-- actions | | `-- counter.js # カウンターアクションの定義 | |-- components | | `-- Button.js # ボタ
mizdra 2017/02/12
redux

react

flowtype
リンク
たぶんこれが一番分かりやすいと思います 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がさっぱりわかんねぇ！」ぐらいの人向け。自分
mizdra 2017/01/27
わかりやすい

react

redux

stage1
リンク
React使い必見！ Immutable.jsでReactはもっと良くなる | Wantedly Engineer Blog
Reactを導入して半年近くが経ちましたWantedlyでは、今年の初めからReact(+Redux)の導入に取り組み始めたので、気付けば半年近く立っていることになります。今自分がこの記事を書いているエディタから、Wantedly Adminのチケット画面まで、ある程度大きなアプリケーションを開発してきました。そこで今回は、チームで継続的に開発していく過程で遭遇した問題と、それを解決するために導入したImmutable.jsについて紹介します。増え続けるCallbackとAction、肥大化するStoreReactとセットで語られることが多いFluxアーキテクチャ。ここでは詳しい説明は省略しますが、とてもシンプルな考え方なので、チュートリアルなどで簡単に学ぶことができます。しかし、実際にチームで開発していくと、たしかに動いてはいるけど、綺麗とは言い難いコードが増えてしまいました。 Ac
mizdra 2017/01/07
react

immutable

redux
リンク
Reduxでコンポーネントを再利用する - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Reduxはとりあえず使えるようになった後の情報が少ないように感じています。よく出回っているサンプルコードは「Real World 〜」のような名前がついていたとしても、あくまで雰囲気を味わうために用意されたものに毛が生えた程度で、現実に起こる問題に対する回答や指針を示しているわけではありません。業務で使うことを検討するのであれば、プロダクトの成長と共にどうやってスケールしていくかイメージできないと導入に踏み切れないですよね。本稿ではサンプルコードより大きな規模で開発していくために、Reduxにおけるコンポーネントの再利用について紹介し
mizdra 2017/01/02
redux

react

javascript
リンク
React with Reduxによる大規模商用サービスの開発 / nodefest2016
東京Node学園祭2016で話したブッキングテーブルのやつ
mizdra 2017/01/02
redux

react

javascript
リンク
How to Build a Todo App Using React, Redux, and Immutable.js
Stay Relevant and Grow Your Career in TechPremium ResultsPublish articles on SitePointDaily curated jobsLearning PathsDiscounts to dev toolsStart Free Trial7 Day Free Trial. Cancel Anytime. The way React uses components and a one-way data flow makes it ideal for describing the structure of user interfaces. However, its tools for working with state are kept deliberately simple — to help remind us t
mizdra 2016/12/31
redux

react
リンク
react.rocks - react リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
mizdra 2016/12/27
redux

react
リンク
1