読者です 読者をやめる 読者になる 読者になる

Reduxのテストファースト開発(第七回 サーバー・アプリケーションとの接続)

前回 uraway.hatenablog.com Setting Up The Socket.io Client クライアントのReduxアプリと、サーバーのReduxアプリをどのようにつなげるのか。 サーバーはすでにsocket接続を受信し、voting stateを放出する準備がある。他方、クライアントはRedux storeを…

Reduxのテストファースト開発(第六回 クライアントサイドのRedux)

前回 uraway.hatenablog.com Introducing A Client-Side Redux Store Reduxはサーバーアプリケーションですでに使用し、その素晴らしさを確認した。次に、ReduxがReactアプリケーションとどのように作用するのかを見よう。 サーバーの時と同じように、アプリ…

Reduxのテストファースト開発(第五回 クライアント・アプリケーション)

前回 uraway.hatenablog.com The Client Application クライアントアプリケーションでもReudxを使用する。Redux自体がどのように働くかはすでに見た。Reduxは、Reactとどのように合わさるのか、Reactアプリのデザインにどのように影響するのか見ていこう。 C…

Reduxのテストファースト開発(第四回 Socket.io サーバーのセットアップ)

前回 uraway.hatenablog.com Setting Up a Socket.io Server このアプリケーションは別のブラウザアプリのサーバーとして働く。そのため、クライアントがサーバーと相互通信する方法が必要となる。 自身のあるいは他人のアクションがすぐに反映されるのを見…

Reduxのテストファースト開発(第三回 Reduxの導入)

前回 uraway.hatenablog.com Introducing Actions and Reducers アプリのコア関数はあるが、Reduxではこれらの関数を直接呼び出すことはしない。関数と外側の世界の中間層となるのが Action だ。 Action はstateの変化を描写するシンプルなデータ構造である…

Reduxのテストファースト開発(第二回 投票アプリケーションのロジック)

前回 uraway.hatenablog.com Writing The Application Logic With Pure Functions アプリケーションロジックに移ろう。アプリのコアは、木構造と新しい木構造を生み出す一連の関数から成り立つ。 Loading Entries まずはじめに、このアプリケーションは投票…

Reduxのテストファースト開発(第一回 前準備)

teropa.info こちらの要約。流石に長過ぎるので、キリの良い所で分割する。 A Comprehensive Guide to Test-First Development with Redux, React, and Immutable Reduxは怖くない。ReduxはとてもシンプルなライブラリなのでAPIをすべて学ぶことは難しいこと…

ElectronとReact-Reduxではてなブログに投稿できるマークダウンエディタ作った

Electron Markdown Editor powered by React-Redux いまのところ特徴としてはこんな感じ はてなブログエントリーの投稿 はてなブログエントリーリストの取得 Evernoteとの連携とか画像アップロード機能とかいろいろやりたい。あとキャッチーなネーミングがほ…

React Redux勝手にチュートリアル(TODO List)

今回は基本的機能としてtodoの追加と削除ができるtodoリストを作成します。 前回と同様ジェネレーターからアプリのフォルダを自動生成するところから始めます。 詳しくは前回の記事参照。 uraway.hatenablog.com まずはindex.js js/index.js import React from …

Redux勝手にチュートリアル(Counter)

最近流行りのReduxをより深く理解するために、 「分かりやすい」を目指して勝手にチュートリアルを書いてみます。 自分的には結構複雑に見えたんですが、 他のフレームワークやアーキテクチャに慣れていると簡単なのでしょうか? 参考: http://qiita.com/ogomr/…

Reduxまとめ(2)超訳

Actions Actionsはアプリからstoreにデータを送る情報のペイロード。storeに対する唯一のソースだ。 新しいtodo itemを追加することを表すactionの例を示す。 const ADD_TODO = 'ADD_TODO' { type: ADD_TODO, text: 'Build my first Redux app' } actionsは…