redux-sagaで非同期処理と戦う - Qiita
はじめに ReduxはSingle Store、immutableなState、副作用のないReducerという３つの原則を掲げたFluxフレームワークです。しかし他のフレームワークと違って提供しているものは最小限で、とてもフルスタックとは言えない薄さです。そのためすべてにおいて定番と言える書き方が定まっているわけでもなく、どうしようか迷ってしまうことも少なくありません。その筆頭とも言えるのが 非同期処理 の扱いです。コミュニティでは今でもさまざまな方向に模索が続いていますが、よく使われているものだとredux-thunk、redux-promiseあたりでしょうか。Reduxに限定しないのであればreact-side-effectというものもあります。こちらはTwitterのモバイルウェブ版で使われていますね。どれを使っても非同期処理が可能になりますが、それはあくまで道具であって、設計の
りだっくすさが(redux-saga)に入門する - wadackel.me
Web アプリを構築したくて久し振りに React を触ってみると、前に少し触っていたのにすっかり忘れてしまっていました。圧倒的に記憶力が低いので、継続的に触っていないと中々覚えられません…。 今だと Angular2 がグイグイ来てたりしてますが、それよりも一度触ったことのある React+Redux を使った方が学習コストを抑えられるな、という訳で再度勉強中です。 改めて色々と調べていると、redux-sagaという Redux の Middleware が非同期処理を書きやすく出来るぞ！との事だったので、まずはシンプルなカウンターサンプルの実装をして感じを掴んでいきたいと思います。 最後の 参考 にもあげていますが、そもそも redux-saga とは一体何者なんだ？というところにおいて、以下の記事が大変参考になりました。 redux-saga で非同期処理と戦う - Qiita ま
さいきんReact, Reduxでやっている設計 - しゅみは人間の分析です
はじめに ブラウザでGUIアプリケーションを作らなくても良い牧歌的な時代は終わりつつあります。個人的な意見としてはブラウザはドキュメントビューアのままでいて、複雑なGUIアプリケーションはネイティブアプリケーションとして実装されてほしいのですが、そうは言ってもお仕事で人間にとって負担の低いUIを作っていく必要があるのです。 Railsでサーバアプリケーションを書きつつ管理画面はネイティブでなんてことはコスト的に実現できません。かといって長期的に運用されるシステムを作ると、システムを運用するためのUIが操作しやすいに越したことはありません。Bootstrapを使っててきとうなフォームを並べただけの画面を作って怒られた経験はありませんか？ たとえサーバ開発者だとしても、我々は使いやすいUIを求め続ける必要があります。 react, redux 複雑なGUIを作るためのフレームワークも乱立の時代
Redux & Immutable.js Take Center Stage
November 17, 2015 / Michelle Gross Redux and Immutable.js Take Center Stage With over 600,000 downloads in the last month from npm,�React�has risen in prominence to become one of the favorite libraries for building dynamic applications. Unlike other frameworks used for making dynamic applications like�Angular�or�Ember, React just provides provides the ‘view’ portion of the application and leaves t
redux-actionsを使って、reduxの記述で楽をしよう！ - Qiita
今日はredux-actions（記載時点ではv2.0.1）という公式推奨パッケージを使って、 reduxのactionとreducerを楽にスッキリ書く方法を紹介します。 追記：現在は公式のドキュメントができているので、こちらを参照するとより確実です。 https://redux-actions.js.org/docs/api/index.html アクションの形式 reducerを書く際に下記の形式（※1）を知っている必要があります。 { type : {symbol|string}, // アクションタイプ payload : {any}, // メインの情報 error : {boolean}, // エラーかどうか meta : {any}, // payloadに乗らなかった情報 } import { createActions } from 'redux-actions';
Redux: Actionのコーディング規約 と redux-actions - Qiita
概要 Redux / Flux の Action にはオブジェクトであれば何を指定しても大丈夫ですが、非公式のコーディング規約(flux-standard-action)があり、Redux の公式ドキュメントでもこのコーディング規約に従うことを奨励しています。 redux-actions を使って、サンプルコードをコーディング規約に従った Action に修正します。 準備 Middleware編 の続き(tag/middleware)を使います。 Action の構造 flux-standard-action の規約では Action は次のような構造のオブジェクトになります。 { type: FOO_TYPE, // must payload: {object}, // optional meta: {object}, // optional error: false, true, u
電卓アプリで学ぶReact/Redux入門(基礎知識編) - Qiita
はじめに 今回の記事は「電卓アプリで学ぶReact/Redux入門(実装編)」を読む前に知っておいたほうがいいReact.jsとReduxの概要についてまとめた記事になります。 特に状態管理の部分がReact/Reduxのアプリケーションを作成する上で重要になってくるので、React.jsの話は最小限にとどめ、Reduxの話を中心に説明をしたいと思います。 React.jsとは まずReduxの説明をする前にReact.jsについて説明をします。 React.jsとは、MVCモデルでいうところのV(View)の部分の役割に特化したJavaScriptで書かれたライブラリです。よくReact.jsと比較されるAngular.jsはMVC全ての役割を担います。 Viewのみの役割を提供するということもあり、学習コストが低く、それがReact.jsのメリットでもあります。 Component R
電卓アプリで学ぶReact/Redux入門(実装編) - Qiita
はじめに React.jsとReduxを理解するために簡単な電卓アプリを作成しました。 今回はWelcome to Reactから始まり、実際にReact/Reduxで電卓アプリを作るまでの手順を説明したいと思います。 特にReduxのデータフローについては言葉や図だけではよくわからないと思うので、電卓アプリを実際に作成することで少しでも理解の助けになればいいなと思っております。 今回の記事では実装がメインとなっているため、React.jsやReduxの概念などについては省略しております。基礎的な部分を理解したい方は「Reduxの電卓アプリで学ぶReact/Redux入門(基礎知識編)」を読んでからこちらの記事を読むと理解がしやすいかと思います。 電卓アプリはcreate-react-appをベースに作成し、簡単のために加算の機能のみ作ります。 create-react-appについて ま
React初心者のためのreact-routerの使い方 - ハッカーを目指す白Tのブログ
2015年1月、React ConferenceにてReact.jsでネイティブアプリが作れるようになると発表された。この発表を受けて最近何かと話題のReact.jsだが、リリースされたのは2013年であり、2009年にリリースされたAngularJSや、2010年のBackbonejsなどの他のjavascriptフレームワークに比べると新しく、まだネットに日本語の情報があまりない。ということで、React.jsのデファクトルーティングライブラリであるreact-routerの使い方についてまとめてみた。 目次1.そもそもreact-routerとは 2. react-routerのインストール方法 3. react-routerの使用例 4. react-routerのコンポーネント一覧 5. Routerのrunメソッド 1. そもそもreact-routerとはreact-rout
はてなブックマーク検索を作りながらFlux Utilsについて学ぶ
facebook/flux 2.1.0からFlux UtilsというStoreなどの実装が含まれるようになりました。 今回Flux Utilsを使って、指定したアカウントのはてなブックマークを検索するウェブアプリを書いてみました。 azu/hatebu-mydata-search azu.github.io/hatebu-mydata-search/ mydataのAPIがCORS対応してないのでJSONProxyを挟んでます。(なのでブックマークデータが多いアカウント名は避けたほうが…) これを作ってみてFlux Utilsについて思ったことを書いていきます。 Flux Utilsの紹介ページに、Flux Utilsの解説が書かれています。 簡単にまとめると以下の4つのクラスがFlux Utilsとして提供されています。 Store ベースとなるクラス ReduceStore Store
FacebookのFluxアーキテクチャの始め方 Part 1 | POSTD
私のように、Reactを使ってより進んだことがしたいと考えたなら、おそらく Flux に注目した経験があると思います。ざっと目を通してタブを閉じ、JavaScript開発者としての自分の人生を見直したことでしょう。 もしReactになじみがなければ、私の記事 「React入門」 を読んでみてください。 Fluxとは？ Fluxは、遠目には始めるために複雑な手順を踏まなければいけないように映ります。しかし、 GitHubにあるexample を見てみれば、これがどのように機能するのかが実に明確になってきます。 簡単に言うと、Fluxは美化された 出版-購読型モデル のアーキテクチャです。データはシステム内を一方向に流れ、そこから様々な利用者が必要に応じてデータを取得します。これについて考えるには、私たちの体に例えてみると簡単です。 イベント – 血液 血液は私たちの体内を一方向に流れています
React.js cheatsheet
<Video fullscreen={true} autoplay={false} /> render () { this.props.fullscreen const { fullscreen, autoplay } = this.props ··· } Use this.props to access properties passed to the component. See: Properties constructor(props) { super(props) this.state = { username: undefined } } this.setState({ username: 'rstacruz' }) render () { this.state.username const { username } = this.state ··· } Use states
Building Plugins for React Apps
Techniques for modular, robust & flexible JavaScript plugins. Earlier this year, we published a blog post about how our team is building a new email app using React, with a primary goal of extensibility. That means allowing developers to write plugins that change the app’s behavior, just like in Chrome or emacs. Over the past few months, we’ve designed a new way to structure large React applicatio
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://post.simplie.jp/posts/81
flux-utilsについて
Fluxアーキテクチャの覚え書きを書いた - saneyuki_s log