はてなブックマーク

3行で言うと react-router はただのコンポーネント切り替え react-router-redux はロケーション情報をストアに同期するだけで、コンポーネントを表示する前にデータ取得する方法を提供しない redux-saga を使えば最高のルーティングが実現できるのでは？ → redux-tower を開発中 リポジトリ: https://github.com/kuy/redux-tower デモ：http://kuy.github.io/redux-saga-tower/blog/ はじめに 「redux-sagaでReduxのルーティングを制する（ｷﾘｯ」とか言っちゃいましたが、まだライブラリをリリースできていませんし、実務で使っているわけでもありません。本当に制しているかどうかはこれから使っていって改良も加えつつって感じです。redux-saga を使う時点でそっと閉じる人

これは Redux Advent Calendar 2016 の3日目の記事になります。 はじめに もはやReduxである必要がまったくないのですが、redux-sagaを使いたい一心で決めました。redux-saga Advent Calendarを作るわけにもいかなかったのでこちらに投稿します。redux-sagaはflowtypeとの相性が悪いというのをよく聞くので、そのあたりについて共有できればなと思います。 作ったもの SoundCloud のウェブ版のプレーヤにはリピート機能がついているんですが、トラック1曲のみのリピートなのでプレイリストのリピートができません。というわけで、無理矢理プレイリストレベルのリピートを実現するべく、Chrome拡張を作ってみました。 ソースコード / インストール ちょっと解説 全体の動作としては、再生中のトラックまたはプレイリストを監視して、そこ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? これは Redux Advent Calendar 2016 の1日目の記事になります。 作ったもの ソースコード / オンラインデモ カーソルキーで移動、スペースキーでポーズ、エンターキーでドロップ。回転は未実装。 構成 React.js + Redux + redux-saga + Obelisk.js Webpack Babel (ES2016, React, Stage-2) flowtype mocha + power-assert なぜ3Dテトリス? 業務で扱っている機能やアプリケーションではReduxを使っていてあまり困っ

flow-typed とは flowtype で外部ライブラリを使うと欲しくなってくる型定義ファイルを集めたリポジトリになります。TypeScript には DefinitelyTyped という型情報のリポジトリがありますがそれと似たようなものです。 flowtype/flow-typed on GitHub このリポジトリではそれらの型定義ファイルをプロジェクトで使うための便利な CLI ツールも npm 経由で提供しています。本稿は flow-typed をプロジェクトで使っていくまでの設定やセットアップについて短く解説します。 CLI ツールのインストール README.md には準備が整ったら npm に公開するよ、と書かれていますが、すでに公開されていて主要な機能は使えているので npm からインストールします（2016-06-12 時点で 2.0.0-beta.5）。 特にプ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに ReduxはSingle Store、immutableなState、副作用のないReducerという３つの原則を掲げたFluxフレームワークです。しかし他のフレームワークと違って提供しているものは最小限で、とてもフルスタックとは言えない薄さです。そのためすべてにおいて定番と言える書き方が定まっているわけでもなく、どうしようか迷ってしまうことも少なくありません。その筆頭とも言えるのが 非同期処理 の扱いです。コミュニティでは今でもさまざまな方向に模索が続いていますが、よく使われているものだとredux-thunk、redux-

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? [更新: 2016/05/12] react-transportを公開、サンプルコードをredux-saga v0.10.2に対応 本稿は2016年4月19日に開催されたMeguro.es #3にて同名のタイトルで発表した飛び込みLTのフォローアップになります。こちらがわかりにくいLT資料です。 発表ではReduxが導入しにくい状況でも使っていく方法はあるよ、という内容で具体的な利用例をデモをしました。しかし、その背景にはもう少し大きな問題意識があって、「食わず嫌い」とか「Redux疲れ」になる前にちょっと落ち着いてReduxについて冷

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におけるコンポーネントの再利用について紹介し

若干乗り遅れた感がありますが、redux-sagaでズンドコキヨシをやりました。 redux-saga というのは redux で非同期処理を扱うためのMiddlewareで、平たく言うとkoaみたいにGenerator関数を使って非同期処理を同期処理のようなスタイルで書き下せます。思いつきの遊び半分で始めたズンドコキヨシが、正直ここまで redux-saga の本質に迫るサンプルになるとは予想もしていませんでした。redux-saga 自体の詳しいは後日別の記事で解説するとして、redux-saga が秘めているパワーを少しでも感じ取ってもらえたらと思います。 デモはこちら このデモにはredux-devtoolsが組み込まれています。右側の黒っぽいドックがそれです。送り出されたActionのログ表示、 Reset で初期状態に戻す、 Commit で現在の状態をスナップショットして、

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

module.exports = function(config) { config.set({ basePath: '', frameworks: ['mocha'], files: [ 'path/to/tests/**/*.js' ], exclude: [], plugins: [ 'karma-chrome-launcher', 'karma-mocha', 'karma-webpack' ], preprocessors: { 'path/to/tests/**/*.js': ['webpack'] }, webpack: { devtool: 'inline-source-map', module: { loaders: [ { test: /\.js$/, loader: 'babel', exclude: /node_modules/, query: { presets:

最初はちょっととっつきにくいけど、責務がはっきり分かれていて比較的コードがごちゃごちゃになりにくい（と思っている）Reduxですが、やはり実戦投入するとどうにも扱いにくい部分が出てきます。 特にそう感じるのは通信系の処理、ユーザーとのインタラクションです。これってつまるところ非同期処理なんですが、処理を依頼する側、つまりActionを投げる側としては「あとのことはまかせた！」と言いたい。Actionを投げる部分ってのはだいたい何かのイベントハンドラだったりしますが、そういう場所に通信やインタラクションの処理をダラダラと書きたくない。 本稿ではそれらの面倒な部分を責務が分離されたメンテナンスのしやすいコードになるようにmiddlewareを活用する例をいくつか紹介します。 その前にmiddlewareについて Reduxの公式ドキュメントではログ出力を例に取り、アプリケーション本体から分離し

2015-08-28 11:06 合成された初期状態ツリーの出力結果を追加 分割されたreducerの初期状態ツリー Reduxの原則の1つであるグローバルな状態ツリーがすべてのソースとなるという点。 理屈ではわかるんだけど、いくつかコンポーネントを作っていくと常に大きなツリーが渡されるってのがとても扱いづらく感じる。つまり、何かアクションを受け取ってそれを状態ツリーに反映させるとき、ほとんどのケースにおいてツリーの一部だけを更新して、それ以外はいじらないことが多いからだ。 Reduxリポジトリのasyncのサンプルコードを追っていくと、reducers/index.jsの部分がよくわからなかった。 他のサンプルだと初期状態ツリーは定数として定義してreducerのデフォルト引数に指定していることが多かったが、asyncではまずそれがない。 そしてなにより状態ツリーはグローバルなものが１つ