超訳 Redux Documentation - ストア(store) - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
Cycle.js / RxJS 入門してサンプラー作ってみた - マルシテイア
youtu.be http://gmork.in/cyro/ サンプラー。 キーボードを押したら音が増える。 [A-Z] : 音を入力 Shift + [A-Z] : そのキーの音をすべて削除 / : 設定パネルの表示 / 非表示 一応ソース fand/cyro · GitHub Cycle.js / RxJS の感想 Cycle.jsとは cycle.js.org Cycle.js は Unidirectional dataflow / Model-View-Intent を実現するWebフレームワーク。 RxJS 及び virtual-dom を使って書かれており、開発者もこれらを利用することになる。 作者の André Staltz 氏は Rx オジサンで、Rx に関するサイトを幾つか作ってる。 Flux や Elm, Famous のアーキテクチャを解説した記事は少しバズったので、
React+ReduxのAction、Reducerを個別にテストする - Qiita
概要 Reactでユニットテストをしたく、コンポーネントのテストであれば以下の様な記事を参考にすればできそうだが、Fluxをつかったアプリで、ActionやDispatcherにロジックがある時には、それでは十分で無いと考えた。 React.js + Jest - Qiita 今回はReact+Reduxを使っているので、Action、Reducerを個別にテストする方針を考えた。テストフレームワークは、karma+jasmineを使用している。 Action テストするactionは以下の様なものを想定している。単純にAPIを叩いてresを得るというもの。 import { REQUEST, REQUEST_SUCCESS, } from 'constants'; // リソース管理はsuperagent import request from 'superagent'; functio
Typescript React 簡易 Redux ( redux, react-redux ライブラリ 使用せず） - Qiita
Typescript 1.6から React がサポートされました。 reduxが最近注目されているので、この機能を使用したいと思います。 以前は fluxxorを使用して React.js, Flux, CofeeScriptで試作したメモの記事を書きましたが、 Dispacherのあたりが冗長に感じていました。 reduxは、特に reducerがテストし易いので、大変良いと思います。 今回は、下記の様にライブラリを使用せず 機能を開発してみました。 reduxの Store機能は、ReactのTop Componentのstateをそのまま使用する。 Dispacherに複数のreducerを登録すると、stateが変わるまで順次処理される。 Stateの取得、Dispachの容易さを考え、Top ComponentのインスタンスをGlobal変数に設定する。 具体的には今回の例では
React and Redux with TypeScript
The release of TypeSciprt 1.6 includes support for React components. I decided to give it a whirl and see what TypeScript has to offer. The end result is a port of the Redux TodoMVC example to TypeScript. (See my repo on GitHub) So why use types in the first place? Isn’t the dynamic and flexible nature of JavaScript what makes it so great in the first place? As strange as it sounds, I actually bel
reduxを試してみた(4日目) - redux-react-routerを試す - Qiita
React.jsと組み合わせるfluxのライブラリreduxを試してみた。 このページは作業ログです。やったことをつらつら書くだけなのでまとめません。あしからず。 対象読者 主に自分 今日のゴール redux-react-routerを使ってページ切り替えを実現する redux-react-routerとは？ Reactのラウター(ルーターではない)ライブラリとしてよくreact-routerが使われる。react-routerの機能は十分だが、現在表示しているページという"状態"がアプリケーションに登場する。これもできればstoreに押し込めたい。ということで登場したライブラリ。react-routerをベースにしたライブラリなので、まずreact-routerから見ていく。 react-routerの特徴 ドキュメントの構造とURLの構造をマッピングするライブラリ。最初ドキュメントを読
Understanding Redux Middleware
I have been using Facebook’s React since v0.9.x in Feb 2014. I am a defector from Backbone.js which initially started after replacing our view layer with React. After understanding the benefits of Flux and it’s unidirectional flow architecture it became pretty evident that I did not need Backbone.js models and collections anymore. I will assume you have some basic knowledge of Flux, Redux, React,
Full-Stack Redux Tutorial
A Comprehensive Guide to Test-First Development with Redux, React, and Immutable Update 2016-02-24: Updated react-router to 2.0.0. In tests, replaced use of deprecated setProps() with ReactDOM.render(). Also now using the react-addons-test-utils package so that no imports of 'react/addons' are needed anywhere. Update 2015-11-06: Updated to the new Babel 6 release. The Babel packages we need to ins
Electron, React, Redux, Redux-DevTools, Bootstrapを使ったBoilerplateを自分なりに書いてみた - エンジニアになりたい
Electronを使ったアプリケーションを書く時にReduxを使ってReactを書きたい、その時にRedux-DevToolsも動かしたい。見た目が味気ないのでBootstrapを導入したい。 という意図で、雛形を作ってみた。 github.com 使い方はレポジトリ先を参考に。 以下のように表示されるはず。 これは、フォームに文字を打つとWelcomeの後の文字が変わるというもの。 こちらは以下を大いに参考にした。 github.com この generator-redux はちょっとバグが含んであるので、自分のやつは改良してある。 ちなみに私以外で、ElectronとReactとReduxの雛形を作った方がいらっしゃる。 pompopo.hatenablog.com
State Management with Redux
Principal Engineer, type system nerd, Rust enthusiast, supporter of social justice, loving husband & father, avid comic & manga reader, 日本語を勉強してる。 Home About Me @BKonkle YouTube I’m a Software Architect with more than 15 years of experience creating high performance server and front-end applications targeting web and mobile platforms, & today I lead a team at Formidable Labs. Share If you follow R
【react+redux】で楽観的に更新する - Qiita
背景 の続き。 ※上の記事書いた時はreduxの1系はまだrcだったし、react-reduxも0.2とかそんなんだったのに、気がついたらrc取れてるは2系になってるとか動きが早すぎです。 今回は追加フォームの動きを実装してみた。 やりたいこと 追加ボタンを押した時点で見た目上のリストに反映し、裏で非同期での追加処理が終わったらサーバ側から取得したIDをstoreに反映させる。 実装 前回の記事と同様に、追加処理を見た目上の追加とサーバとの同期処理完了の二つのactionに分割します。非同期actionについては、前回の記事でも書いた通りredux-thunkを使って実現しています。 export const ADD_TODO = 'ADD_TODO'; function addTodo(todo) { return { type: ADD_TODO, todo: todo }; } ex
Redux初めて触って色々わかったメモ - Qiita
最初思ってたこと vs 現実 思ってたこと：なんか軽量？ 現実：誤解だった。割りと作ってくと大きめになってくる。軽量感は無い が、redux本体のコードは結構薄い。本当に関数群だけ提供しているイメージ 思ってたこと：他のfluxと圧倒的に違う？ 現実：これも誤解。構成としては色々作りこむと最終的には一般的なfluxと同じ感じになる（flummoxとかmartyあたりと体感一緒になる） ActionとかActionCreatorとかその辺が一緒になってくる。 思ってたこと：ES6で圧倒的に書ける？ 現実：正解。圧倒的にES6を前提にしている。 思ってたこと：React用のもの？ 現実：別にそうでもない。react-reduxを使うことでreactで使えるようになる。 詰まった所など 用語編 割りと初めて見たりする用語に出会った ActionCreator martyあたりにもあった。{typ
Reduxにおけるreducer分割とcombineReducersについて - Qiita
2015-08-28 11:06 合成された初期状態ツリーの出力結果を追加 分割されたreducerの初期状態ツリー Reduxの原則の1つであるグローバルな状態ツリーがすべてのソースとなるという点。 理屈ではわかるんだけど、いくつかコンポーネントを作っていくと常に大きなツリーが渡されるってのがとても扱いづらく感じる。つまり、何かアクションを受け取ってそれを状態ツリーに反映させるとき、ほとんどのケースにおいてツリーの一部だけを更新して、それ以外はいじらないことが多いからだ。 Reduxリポジトリのasyncのサンプルコードを追っていくと、reducers/index.jsの部分がよくわからなかった。 他のサンプルだと初期状態ツリーは定数として定義してreducerのデフォルト引数に指定していることが多かったが、asyncではまずそれがない。 そしてなにより状態ツリーはグローバルなものが１つ
モダンなisomorphic JavaScriptのプロジェクト構成をまとめる - Qiita
#概要 最近のモダンなリポジトリなどから、よくあるisomorphic JavaScriptなプロジェクト構成をまとめてみた。 #プロジェクト構成 ##クライアントサイド ###React クライアントサイドにはReactを使用しているものが多い。 reactjs isomorphic - Google 検索 ##クライアントサイドアーキテクチャ ###Flux 設計パターンには例によってReact.jsと相性の良いFluxを用いる。フレームワークは**Redux**が人気。 人気のFluxフレームワークReduxをさわってみた - マルシテイアは月の上 Fluxフレームワークまとめ - Qiita ##クライアントサイドルーティング ###React Router これはほぼ一択な気がする。 React.jsでserver-side renderingにも対応したRouting - Qi
fluxフレームワークreduxについてドキュメントを読んだメモ - fukajun - DeepValley -
この辺を読みながらfluxの各パーツの役割、reduxの登場人物について 自分のめもとしてまとめてみた http://rackt.github.io/redux/index.html reduxの思想 1つ情報源を正とする アプリケーションの状態は1つのstoreオブジェクトが管理する stateはリードオンリー 状態を変更する唯一の方法はactionを発行すること 状態の遷移はただの関数によって行う 状態を変更するための処理はreducersに定義する fluxの登場人物 actionCreator actionを作るための関数 ajaxリクエストなどの処理を行い、結果を含めたactionを作成する action アプリケーションで何が起きたのかとそれに付随するデータ nTypeと任意のデータを持つ単なるObject acitonCreatorによって作成されてdispacherに渡され
[WIP] react-reduxについてドキュメントを読んだメモ - fukajun - DeepValley -
reduxの思想 統一されたデータストア アプリケーションの状態は1つのstoreオブジェクトが管理する stateはリードオンリー sateを変化させる唯一の方法はactionを発行すること 状態の遷移はただの関数によって行う stateを変更するための処理はreducersに定義します fluxの登場人物 actionCreator 最終的にactionを作るための処理 ajaxリクエストなどの処理を行い、その結果をのせたactionを作成する 例) 例えば、ajaxでコメント一覧を取得して { actionType: UPDATE_COMMENTS, comments: response.body.comments } のようなactionを作る action アプリケーションで何が起きたのかとそれに付随するデータ actionTypeと任意のデータを持つ単なるObject acit
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - olegakbarov/react-redux-starter-kit: My best-practices-included universal frontend starter kit
GitHub - nwwells/redux-async: dispatch async actions in redux
Introduction to Redux
reduxを試してみた(2日目) - React.jsを学ぶ - Qiita
