react-redux hooks 時代のContainerコンポーネント - Qiita
先日 react-redux の v7.1 の stable release で hooks に対応したAPIが入り界隈で話題になりましたね。(追加されたAPIの詳しい解説はこちら https://react-redux.js.org/api/hooks) 結構コンポーネント内からお手軽に参照できる感動を伝えている情報が多いのですが(実際私も感動の嵐です)、ここで改めて「なんで Container コンポーネントって必要なんだっけ？」と「hooks APIではどうやって Container コンポーネントを書くのか」を考えていきます。 なぜ hooks API になった今でも Container コンポーネントが必要なのか 始めにここで言う "Container コンポーネント" は 「Redux の Store から値を注入するためのもの(あとdispatch 関数)」という狭義の意味で
Clean Architecture と React を組み合わせる - Fuji Haruka's blog
Clean Architecture と React を組み合わせるデモアプリが eduardomoroni/react-clean-architecture というリポジトリにあったので、コードを覗いたら勉強になった。 Clean Architecture を大づかみに理解する よく出てくる図。 私の理解している限りでは、 Clean Architecture において重要なのはモジュールの依存関係に規律を導入することで、中でも「重要なビジネスルール」を中心に依存関係を整理することであると思っている。 SOLID原則とか小難しい用語がたくさん出てくるけど、要するにそれはモジュールをどう分割するか、モジュール同士をどう結合するかに関する原則で、Clean Architecture を実践的に導入しようとしたら必要になってくるものだろう。 でも上の図を理解するだけだったら、もっとシンプルに説
Haskellの型クラスについて | mrsekutの備忘録
NewsLearn more about the company, PR and product updates here.
React/Redux約三年間書き続けたので知見を共有します | Enigmo Life
Enigmo Advent Calendar 2018の4日目の記事です。 この記事の目的 Enigmoが運営しているBUYMAでは古代から運用しているjQueryの他に、2016年頃から一部ページのフロントエンドをReact/Reduxで構築しています。 私自身もEnigmoに入社してからの約三年間でReact/Reduxアプリケーションの開発に多数携わってきましたので、そこで培った知見を共有したいと思います。 React/Reduxの利点 まずはじめに、ReactとReduxを使うメリットを再確認しておきたいと思います。 それぞれのメリットをしっかりと認識しておくことで、実装する際どう書くか迷ってしまった場合などにそのメリットを最大限活かす選択をすることができます。 Reactの利点 コンポーネント化が容易で再利用性が高い 状態をDOMから分離できる(Stateless) Reduxの
typescript-fsaに頼らないReact × Redux
11月1日 [増枠] React会 #1 で話した内容のスライドです
react-reduxのパフォーマンスについて - anect Tech Blog
エンジニアの原です。 これ、数人同じ事思ってる人いたみたいでした。よかった。 http://anect.hatenablog.com/entry/2017/06/09/151000:embed:cit ブログ内では「mapStateToPropsとmapDispatchToPropsを使う理由が分からない、mergePropsで全部やるのがシンプルで良いじゃないか」というものでしたが 今回react-reduxのソースを解説しつつそれらの役割と必要性についてと実際どうするべきか、について少し考えました。 TL;DR 結論から言うと 「場合によって（というか多くの場合）はmapStateToPropsとmapDispatchToPropsをちゃんと使わないとパフォーマンスが下がる」 です。 以下、ソースの解説と自分の意見です。 react-reduxの実装の話 ちょっとだけreact-red
React, Reselect and Redux
React is awesome. Redux is awesome, Reselect is awesome. It can be tricky to get all three to play nice together. I will try and explain, in detail, how they work together. npm install --save reselect If you have no knowledge of React, Redux and Redux-Connect, stop, go learn those things and comeback later. Reselect creates memoized selectors, composed of selectorsYep..that is why this can be tric
recompose と ReactRedux.connect の HOC を Flow で合成して型付けする - Qiita
flow@60.1 これらの型定義の導入を前提とする https://github.com/acdlite/recompose/blob/master/types/flow-typed/recompose_v0.24.x/flow_v0.55.x-/recompose_v0.24.x.js https://github.com/flowtype/flow-typed/blob/master/definitions/npm/redux_v3.x.x/flow_v0.55.x-/redux_v3.x.x.js ユーティリティタイプや段階的な推論を組み合わせるテクニカルなコードになったが、一度理解してしまえば型付けされた props が手に入る。 /* @flow */ import React from 'react' import { bindActionCreators, combineR
Re:ゼロから始めるReact + Reduxのアプリケーション作成（Ant-designを利用） - Qiita
いまさらですが、React + Redux + ant-design ではじめてみました。 普段は、フロントエンドはAngularを使って開発することが多いのですが、せっかくの年末の長期休みに普段触らないものを触ろうと思い、まだ触ったことがなかったReact, Redux, そして、最近Alibabaのant-designが良いらしいという情報を聞いたので試してみて、所感をまとめてみました。 現状での 完成版のコード になります。 (Google Map APIと、楽天トラベルAPIを使って、ロケーション情報の近くのホテルを探す検索WEBページ) Reactを触ってみようと思った理由 Angular 2/4が狭量で遅すぎる理由 Googleの開発者達が離れたこと（それぞれ独自のフレームワーク、VueとAureliaを開発） Angularは冗長である。 「Angularは大型チームに最適」
React 案件での面談時の質問事項 - Qiita
import from 'hoge.css'; const Hoge = () => ( <div className="hoge"> hogeee </div> ); css modulesなどはグローバル空間の名前を汚さないように一意の名前になるように設計されているので 各コンポーネントで自由な名前をつけることが出来ます しかし、上の内容だとグローバル空間の名前が汚染されていくのでBEMなどの命名規則で守っていくしかありません もし、class名で悩まされたくないのであればこの質問で避けることが出来ます コンポーネント設計 画面仕様書だけ渡されて作る案件が結構多かったりします コンポーネントの設計は画面実装者だけが把握するものではなくメンバー全体ですり合わせていく方がいいと個人的に思っています 似たようなコンポーネントなのに別の画面では違う実装の仕方をしていたり、 逆に使いまわされる前
2018年は、reduxとeslintとflowとwebpackを捨ててみようと思う - Qiita
2017年版と2018年版でwebアプリケーション作成時のreactの（マイ）ベストプラクティクスを以下のリポジトリに、まとめてみたので記事にしてみました。 react-best-practices https://github.com/wheatandcat/react-best-practices/tree/master ちなみにタイトルは、その過程で2018年版に削除したpackageです（理由は後述） github サンプルコードの内容は、ログイン/ログアウト + fetchした内容を画面に表示するだけです （ただのサンプルなので、実装はハリボテです） 2017年版 https://github.com/wheatandcat/react-best-practices/tree/master/2017years 2018年版 https://github.com/wheatandc
ReduxとMobXの選定観点 - Qiita
この記事を書いた当時、MobXは余計な複雑さが隠蔽され、とても良く目に映りました。何よりReduxにはOOPが可能なモデルが無い、という当時のReduxに対する不満を解決してくれました。(今はReduxにもモデルを持ち込む手法を選んでいるので不満はありませんが) 直近、同僚に「Redux と MobX の選択はどうすれば？」と相談されたので、その日の返答内容をまとめてみました。 TODOサンプルだけでは測れない現実の課題 ライブラリのキャッチアップに、TODOや「+1」するカウンターで検証することはよくあると思います。ただし、これだけでは長期運用するプロダクトの検証には不十分です。 MobXは便利で簡単に始めることが出来るため、Storeを無作為に参照しあってエンバグしやすいコードが出来てしまいがちです。 Storeが数えるほどしかなく、機能も単純であれば原因を突き止めるのは容易です。しか
React Redux の SPA を運用して得られた知見と実装例、開発フローもあるよ！ - Qiita
Facebook が開発したUI ライブラリ 旧来の DOM 操作による状態管理を props や state で抽象化 パーツをコンポーネントごとに管理するのが得意 https://reactjs.org/ から、ライブデモを試せます。 SPAなどの複雑化する React のステート（状態）管理を、ルール（哲学）に従って書かせることで、フロントエンドの動きを追いやすくするためのライブラリ （*個人的解釈です） もともとは Flux と言う、データの流れを一方向に制限することで、流れを追いやすくするという、オブザーバーパターンの亜種から、さらに転じた考え方。 Redux と言う名前は 「Reducer」 + 「Flux」 で 「Redux」だそうです。array.reduce と同じような役割を Reducer が担います。詳しく知りたい方は作者の発表をご覧ください Dan Abramov
Static HOC analysis for recompose and redux by flowtype
/* @flow */ import React from 'react' import { bindActionCreators, combineReducers } from 'redux' import { compose, lifecycle, pure, type HOC } from 'recompose' import { connect } from 'react-redux' // reducer const INC = 'inc' const inc = () => ({ type: INC }) type Counter = { value: number } type Action = $Call<typeof inc> const counter = (state: Counter = { value: 0 }, action: Action): Counter
Reactでパターンシーケンサを作った話 - Speee DEVELOPER BLOG
こんにちは、Speeeエンジニアの二社谷(nishaya)です。 先日開催されたSpeeeKaigi(詳細は以下の記事を参照)にて、Reactで使ったパターンシーケンサの発表を行いました。 tech.speee.jp 今回作ったもの DEMO ソースコード ブラウザで動くマルチトラックのステップシーケンサです 音楽の知識がなくても、なんとなく触っているだけでそれっぽい音が出ます サンプラーもついてます 使ったもの React/Redux FlowType Web Audio API/MediaDevices 発表資料 speakerdeck.com モチベーションと課題 前回のSpeeeKaigiではReactでシンセサイザーを作ったのですが、自分は楽器を弾けるわけではないので、ブラウザを使って音楽を楽しむところまでは到達できませんでした。 そこで、下記の3点を押さえたモノを作れば、楽器を
StoryBook meets redux
Develop and test components in isolation is great, I wrote about that in a previous post, but sometimes we rely on other software to develop our own. That’s the case with most of the redux ecosystem; Redux gave us an excellent model to build our apps then people started to build abstractions on top of it. One of the abstractions I like the most is redux-form. Redux form enables consistent form han
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
unstated-next による Redux に頼らない状態管理の考察
Clean Architecture in Web Frontend #mixleap - Speaker Deck
RxJS + Redux + React = Amazing
redux-pluto
