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 関数)」という狭義の意味で
typelessというReact向け状態管理ライブラリがめっちゃいい - Qiita
typelessというreactの状態管理ライブラリが非常に良いので紹介します 2019/10/24: 入門記事 書きました What is typeless? react+typescriptで使う前提のreduxラッパーライブラリ。reduxが抱える以下のような課題を解決する 異常に多いボイラープレートコード 重複した型注釈 大量の依存ライブラリ 欠如したコーディングガイドライン これらの課題を踏まえて以下のコンセプトでデザインしている TypeScriptフレンドリー 実用に耐えうる機能を全て内包する 容易なモジュール追加 多くのユースケースに対する解決策をデフォルトで提供 ＊参考： https://typeless.js.org/introduction/motivation reduxの抱える課題について ドキュメントのmotivationの項で書かれていることは多くの人が課題を
Clean Architecture と React を組み合わせる - Fuji Haruka's blog
Clean Architecture と React を組み合わせるデモアプリが eduardomoroni/react-clean-architecture というリポジトリにあったので、コードを覗いたら勉強になった。 Clean Architecture を大づかみに理解する よく出てくる図。 私の理解している限りでは、 Clean Architecture において重要なのはモジュールの依存関係に規律を導入することで、中でも「重要なビジネスルール」を中心に依存関係を整理することであると思っている。 SOLID原則とか小難しい用語がたくさん出てくるけど、要するにそれはモジュールをどう分割するか、モジュール同士をどう結合するかに関する原則で、Clean Architecture を実践的に導入しようとしたら必要になってくるものだろう。 でも上の図を理解するだけだったら、もっとシンプルに説
3 ways to test mapStateToProps and mapDispatchToProps
You already know that you shouldn't actually test the result of calling connect (the connected component) - as Redux already makes sure the behaviour of connect is correct. Instead, you test your wrapped component separately, by exporting it as a named export. But what about mapStateToProps and mapDispatchToProps? This is custom code that could have bugs. The Redux docs don’t really mention an off
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の
StorybookにおけるRedux Storeへの接続
はじめに Storybookで作成されたStory（Storeへconnectされたコンポーネントを配下に持つコンポーネント）をReduxの<Privider />でラップし、Storybook用のモックデータ（initialState）を出力するまでを備忘録を兼ねて書きます。 環境構築 実行環境 Mac OS Sierra: v10.12.6 node: v8.11.2 npm: v5.6.0 yarn: v1.5.1 Reactアプリの構築 create-react-app storybook-react-redux-sample # 作成したプロジェクトのルートに移動 cd storybook-react-redux-sample
typescript-fsaに頼らないReact × Redux
11月1日 [増枠] React会 #1 で話した内容のスライドです
Re-ducksパターン：React + Redux のディレクトリ構成ベストプラクティス
Re-ducks というディレクトリ構成のベストプラクティスについてまとめる。Re-ducksパターンを使うことで、React + Redux を用いた開発がよりメンテナンスしやすいものになる。 Ducks パターン 名前からもわかるように、Re-ducks は Ducks というパターンをベースにしている。 erikras/ducks-modular-redux Ducks パターンが解決すること： actionType、action、reducerが散らばっててつらい 結局のところ actionType、action、reducer は密結合なので、ducksパターンではこれら3つを1つのファイルにまとめる。 // widget.js // Actions const LOAD = 'my-app/widgets/LOAD'; const CREATE = 'my-app/widget
RxJS + Redux + React = Amazing
This document provides an introduction to React and Redux frameworks. It discusses JavaScript components and state management with React as well as Redux for managing application state through actions, reducers, and a central store. The document also covers related topics like functional programming, smart and dumb components, and React Native platforms.
どのようにreduxのreducerのテストを書くか？
reduxにおいてreducerのテストは重要性が高く、誰もがテストをしていると思いますが、今回はその方法を見ていくことにします。 最近ではテストはほとんど Jest が使われているので、Jest を前提としますが、他のテストフレームワークを使っている場合は適宜読み替えてください。 準備 とりあえず簡単な redux のコードを用意します。現環境で型がない環境であることは少ないでしょうから、flow を使います。TypeScript を使っているのであれば適宜読み替えてください。 akameco/how-to-test-reducers // @flow type Exact<T> = T & $Shape<T> type State = { count: number, text: string } type Action = | { type: 'inc' } | { type: 'd
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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
unstated-next による Redux に頼らない状態管理の考察
Clean Architecture in Web Frontend #mixleap - Speaker Deck
うっかりReduxのReducerまでコード分割しようとするとどうなるか – Eureka Engineering – Medium
Storybook Tutorials
GitHub - quipper/redux-rn-misc-enhancer: A light weight wrapper of AppState and NetInfo which connects those changes directly to your Redux store.
how-to-start-redux.md
redux-pluto
GitHub - akameco/reducer-tester: Utilities for testing redux reducers