【追記】 もうこれ古いから参考にしないでください https://t.co/mXtcc73Orf — もしLaravel が流行しなくなってこられてきてたとしたら、絶対に捨てられてこられてたと思うか (@mpyw) January 26, 2021 Redux にはその昔 connect()() とかいうクソAPI と, Redux-Saga とかいう宗教がありました という考古学です — もしLaravel が流行しなくなってこられてきてたとしたら、絶対に捨てられてこられてたと思うか (@mpyw) January 26, 2021 読者対象 Tutorial: Intro ToReact -React Example: Todo List · Redux 「チュートリアルそれぞれ一周した!Reactは何とか理解できたが,Reduxがさっぱりわかんねぇ!」 ぐらいの人向け。自分

成果物github.com 目的 ReduxとES6への入門。React.jsを(ようやく)触る機会が出て、情報量の多いFluxxorとCoffeeScriptで入門してた。 いろいろ情報を集めると、flummoxが人気!!みたいなのを見て、覗いてみたら4.0 will likely be the last major release. Use Redux instead.It's really great.って書いてあってReduxを触ってみることにした。exampleとawesome-reduxを眺めたらどれも当たり前のようにES6で書かれていて、合わせて入門することにした。 Redux概要 まだかなり理解が怪しいんだけど、以下の図がイメージしやすかった。 André Staltz - Unidirectional User Interface Architecturesより S

前回 QiitaにReact.js のReact.js の公式Tutorial をgulp を利用して簡単に実行できる環境を作って、ES6も試した で公式TutorialをECMA2015(ECMA6)を利用して書き直しを行ったのですが、ReactといえばFlux、Flux といえばRedux ということで、流行りのRedux を利用して記述したらどうなるのかを試してみました。 また 同じく流行りのテスト環境である Mocha + power-assert を利用して、テストを追加してみました。React および Redux はテストも非常に行いやすいのを体感しました。 前回の続編として、以下GitHub で公開しています。 https://github.com/ma-tu/react-babel-gulp-browserify-tutorial/tree/es6-redux Rea

こんにちは。Sales Systemチームの金子です。Sales Systemチームでは、cybozu.com Store や、販売管理システム等の開発をしています。 このエントリでは、cybozu.com 稼働状況のフロントエンドをReact/Reduxで作り直した話を書いていきます。「React/ReduxでWebアプリケーションを作ってみようと考えている人」を対象としています。 TOC 「cybozu.com 稼働状況」とは? 作り直した背景技術概要React/FluxについてReact/Redux Routing Resources Async Multilingualization/Localization ES6 UtilityLint Testing 取り組んでみた感想 まとめ 「cybozu.com 稼働状況」とは? クラウドサービスはサービスの稼働状況をステータス

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
One thing that causes even more confusion than Flux is the difference between Flux and Redux, a pattern that was inspired by Flux. In this article I’ll explain the differences between the two. If you haven’t read the last article about Flux, you should do that first. Why change Flux?Redux solves the same problems as Flux, plus some.Just like Flux,it makes state changes in apps more predictable.

最初思ってたこと vs 現実 思ってたこと:なんか軽量? 現実:誤解だった。割りと作ってくと大きめになってくる。軽量感は無い が、redux本体のコードは結構薄い。本当に関数群だけ提供しているイメージ 思ってたこと:他のfluxと圧倒的に違う? 現実:これも誤解。構成としては色々作りこむと最終的には一般的なfluxと同じ感じになる(flummoxとかmartyあたりと体感一緒になる) ActionとかActionCreatorとかその辺が一緒になってくる。 思ってたこと:ES6で圧倒的に書ける? 現実:正解。圧倒的にES6を前提にしている。 思ってたこと:React用のもの? 現実:別にそうでもない。react-reduxを使うことでreactで使えるようになる。 詰まった所など 用語編 割りと初めて見たりする用語に出会った ActionCreator martyあたりにもあった。{typ

ReduxのGithubドキュメントを基に入門用記事として書いたものを、簡潔にまとめました。 もと記事はこちらです。 Redux入門 1日目 Reduxとは Redux入門 2日目 Reduxの基本・Actions Redux入門 3日目 Reduxの基本・Reducers Redux入門 4日目 Reduxの基本・Stores Redux入門 5日目 Reduxの基本・Data Flow Redux入門 6日目 ReduxとReactの連携 Reduxとは Reduxは、ReactJSが扱うUIのstate(状態)を管理をするためのフレームワークです。Reactではstateの管理するデータフローにFluxを提案していますが、ReduxはFluxの概念を拡張してより扱いやすく設計されています。 Reduxはstateを管理するためのライブラリーなので、React以外にもAngularJS

JSで書くデスクトップアプリが熱い Electron 熱いです。 Atom を始め、Qiita の Kobito やSlack など、 十分に実用できるアプリケーションが登場しはじめています。 なにかと話題のRPGツクールMVは、NW.js(旧node-webkit)ですが、これもJSで書かれていますね。 NW.js は、その他、女の子といちゃこらする系のゲームでも使われています。 JS でデスクトップアプリを書いて、うん千万売り上げるのも、もはや絵空事ではありません。 今回は、Electron と Redux、React の組み合わせで、デスクトップアプリを作るまでの、簡単なチュートリアルを書きます。 登場人物紹介 ElectronGithub が開発してる、JS でデスクトップアプリが書けるすごいやつ NW.js より活発そうですごいReact Facebook 製のすごいやつ
名前はダークソウルのフラムト(frampt)から。FLux Minimum なんたらかんたら。 なんかTwitterで色々言ってたら naoyaさんにまとめられたので、ここに僕の考えを詳しく書いておく。 mizchi の Redux 考 -Togetterまとめ やりたかったこと 基本的なアイデアは、stateをpushする方式(setStateみたいな)だと非同期間で参照したときの値がズレて非同期の終わる順番次第では状態の遷移ステップが壊れてしまう可能性があるんだけど、前のstateをとって次のstateを返す非同期をキューに並べて順に実行することで、トランザクションみたいなものを保証することができるだろう、というもの。 軽量(pubsubインターフェースはEventEmitterそのまま) 複数の状態更新関数の待ち合わせ reduxで感じた不満の解消TypeScriptフレンドリー

1リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く