[B! redux] zyxwvのブックマーク

React + Redux: Scrolling a DOM element after state change

zyxwv 2019/03/02

“Now since you want to scroll down after a new message is pushed to the messages state, the best place to do this would be componentDidUpdate()”

react
redux

リンク

redux-thunkなのかredux-promiseなのかredux-sagaなのか、それともredux#bindActionCreatorsをやめるのか - Qiita

前提ここで書くのはあくまで個人的な意見です。 react, reduxはどちらも使い方次第でフレームワークっぽくも使えるし、ただのツールとしても使える。だからreact, reduxを使ったフロントアーキテクチャはいくらでもあっていいと思う。これはそのうちの一つを提案するものです。とはいえ特別な実装方式を編み出したわけでは全然なくて、むしろ１周して出戻りしたかんじ。結論非同期処理をコンテナ(またはそこで使うモジュール)に書くだけ。今は、非同期処理をするためのredux middlewareを使ってないです。過去記事(react, redux周りのパッケージ選定とKPT[2016-05-27現在])にて、この辺についてもなんやかんやと言っているけど、今はthunkもpromiseもsagaも使っていない。その実装が凄くシンプルで気に入ってるので紹介します。どうやるのか red

zyxwv 2017/05/01

非同期な処理は container に閉じ込める

redux

リンク

How to dispatch a Redux action with a timeout?

Don’t fall into the trap of thinking a library should prescribe how to do everything. If you want to do something with a timeout in JavaScript, you need to use setTimeout. There is no reason why Redux actions should be any different. Redux does offer some alternative ways of dealing with asynchronous stuff, but you should only use those when you realize you are repeating too much code. Unless you

zyxwv 2017/05/01

非同期なアクションの扱いかた

redux
react

リンク

Reduxでコンポーネントを再利用する - Qiita

Reduxはとりあえず使えるようになった後の情報が少ないように感じています。よく出回っているサンプルコードは「Real World 〜」のような名前がついていたとしても、あくまで雰囲気を味わうために用意されたものに毛が生えた程度で、現実に起こる問題に対する回答や指針を示しているわけではありません。業務で使うことを検討するのであれば、プロダクトの成長と共にどうやってスケールしていくかイメージできないと導入に踏み切れないですよね。本稿ではサンプルコードより大きな規模で開発していくために、Reduxにおけるコンポーネントの再利用について紹介します。実現したいことコンポーネントの再利用によってどのようなことを実現したいのかイメージしてもらうため、馴染みのあるアプリケーションの機能を具体例として挙げてみます。 Gmailで名前にマウスオーバーしたときに出るプロフィール情報プロフィール画像の表示

zyxwv 2017/04/21

redux
react

リンク

[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を分離することで，コンポーネントの再利用性を高めることができる，らしいです．自分

zyxwv 2016/10/26

component はビューだけ、container はロジックだけ

react
redux

リンク

React+Redux入門 - Qiita

※この記事を書いたのは2016年4月です。Qiitaでは記事をアップデートするとその日付のみが表示されていまうため、新しい記事のように見えるかもしれませんが、現代ではもっと進化していることにご注意ください。素直にReact Hooks を使いましょう。あと Redux は用法用量を守って気をつけて使ってください。なんならReduxは使わない方がいいでしょう。最近のモダンなウェブフレームワークと言えば、React+Reduxですよね。でも、なんか難しそうとか、ReactってPHPみたいにViewにロジック混ざりそうとか感じて尻込みしていませんか？それはただの誤解かもしれません。React+Reduxはそんなに難易度の高いものではありません。ただ単に、新しい概念で構成されているから、カルチャーショックのようなものがある、というだけのことです。React+Reduxに入門してみましょう。僕自

zyxwv 2016/10/25

mapStateToProps(state) は react に値を渡す関数に名付けられる。mapDispatchToProps は react に action creator を渡す関数に名付けられる。

リンク

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

zyxwv 2016/10/25

必ず Action 経由で状態を変更することでデータ操作を一元管理。ユーザイベントとサーバイベントなど、ソースが違うイベントでも漏れなく処置しやすい。アプリで1つの大きな状態遷移表を持つ感じ。

リンク

はてなブックマーク

タグ

関連タグで絞り込む (2)

reduxに関するzyxwvのブックマーク (7)

お知らせ

月間はてなブックマーク数ランキング（2024年5月）

今週のはてなブックマーク数ランキング（2024年6月第1週）

今週のはてなブックマーク数ランキング（2024年5月第4週）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス