次のReact状態管理はMobXにする理由 - Qiita
2017/12/29更新： ReduxとMobXの選定観点 も併せて見ていただければ幸いです front-end-handbook-2017 に名前が挙がっていた MobX に興味が湧き調べてみました。その結果、掲題のとおりの記事を書きたくなるまでに至ったので、個人的にReduxより優れていると感じた点を挙げたいと思います。 記述量が圧倒的に減る Store概念のわかり易さ バケツリレーが実質不要になる injectを活用するとjsxが純粋になる デコレーター層の存在 記述量が圧倒的に減る 一つの双方向な値をコンポーネントに表示するために、Reduxでは以下の作業が必要でした。 Reducer に initialState として値を追加 Reducer で Object.assign した新しい State を生成 ActionType を追加 ActionCreator を追加 Act
reduxよくわかんなかったのでPythonでredux実装した - Heppoko Binbo Yarou no Newbie Nikki
class createStore: """ほんとはシングルトンにしないといけないけどわかりづらくなるのでやめた 関数にした場合は、Pythonだと "JavaScriptでは全然考えられてないローカルスコープ" で大変そうなのでクラスにした""" def __init__(self, reducer): self._state = None self._listeners = [] self._reducer = reducer def subscribe(self, listener): self._listeners.append(listener) def unsubscribe(listener): self._listeners.remove(listener) return lambda: unsubscribe(listener) def dispatch(self, ac
Redux 4 Ways
At the last React Native online meetup, I gave a presentation on the differences of Thunk vs Saga vs Redux Observable (see slides here). These libraries offer ways to handle side effects or asynchronous actions in a redux application. For more information on why you may need something like this, see this link. I thought I would take this one step further and not only create a repo for viewing and
React + Redux + React-Routerでブログを作りました。 - Qiita
はじめに 社内の勉強会用に作りました。 できるだけシンプルなのもを作りたいと思い、ブログにしてみました。 やりたい事 React + Redux + React-Routerで作りたい。 ブログっぽいものを作りたい。 Markdownで記事は書きたい。 シンタックスハイライトしたい。 管理画面は作りたくない。 記事を読んでいる量を表示したい。（Pocketみたいなやつ） ソースやサイトはこちらです（まだアップデートする予定） github : https://github.com/yutasuzuki/React-redux-blog/ 各ライブラリの特徴を理解する 公式サイトやREADMEを軽く目を通したり、チュートリアルをやったりしています。 その上で以下のサイトや記事、書籍がとても参考になりました。 [React] 入門 React ―コンポーネントベースのWebフロントエンド開発
React with Reduxによる大規模商用サービスの開発 / nodefest2016
東京Node学園祭2016で話したブッキングテーブルのやつ
React Redux Real World Examples 〜先人から学ぶReact Reduxの知恵〜
React Reduxを使ってプロダクトを作りはじめて、かれこれ半年くらい経ちます。 しかし、どうもうまく書けていない気がすることがときどきあり、悩んでいたところ、ツイッターで次のような助言をもらいました。 @__tai2__ 達人かどうかは微妙なところがありますが、ある程度の規模のコードはここにリンク集あります https://t.co/B79B5s1DTe — Yuki Kodama (@kuy) 8 December 2016 この記事は、上記のリンク集でまとめられている実際のReact Reduxプロダクトのソースコードを調査することで、筆者がふだんReact Reduxで開発をしていて感じる疑問への答えを探る試みです。 筆者が答えを得たいと思っている疑問は次の3つです 1 Storeはどんな具合に階層化すべきか Store初期化(hydration)用データの定義はどうすべきか
Reduxをソースコードから理解する その1 - Qiita
Reduxは簡単に全部読める規模のライブラリです。ソースコードを読んでからリファレンスを見たほうが理解しやすかったので紹介します。また、有名なコードを読むことによるJavaScriptの勉強も兼ねています。 今回はReduxの中心であるStoreの作成・初期化とdispatch()について見ていきます。 対象読者 Reduxを少なくとも1回くらい使ってみた人向けです。 バージョンは、2017-2-22時点でmasterの3f319eb7を見ています。 Store Reduxはreactなどのview libraryと併用し、状態管理をするライブラリです。アプリの状態を1つにまとめた構造(=Store)に対して、操作(=Action)を割り当てる(Dispatch)することで遷移させます。 Store · Redux まずは、Storeを作成するcreateStore()をみていきます。しば
ReactにReduxを組み合わせると何が楽なのか - アルファブレンド プログラミングチップス
React + Reduxを使うとどうメリットがあるかというと、色々とあるとは思う。 ただ、どう楽になるのかというのに焦点をおいてみる。 Reactのみの例 下記のようなコンポーネント構成のアプリケーションを作成するとする。 コンテナ : App ヘッダ : Header ログインボタン : Login(ログイン時はユーザー名表示) コンテンツ : Contents Reactのみだと関連箇所は下記のようなjsxになるだろう。 App <div> <Header user={this.state.user} onLogined={this.onLogined} /> <Contents user={this.state.user} contents={this.state.contents} /> </div> Header <div> <Login user={this.props.us
React&Reduxを牛丼屋に例えてみる図 - Qiita
import React from 'react'; import { render } from 'react-dom'; import { createStore } from 'redux'; // 座席確保(State) const initialState = { // 単品メニューの準備 menu: '', // 全ての注文の準備 menus: [] } // チケット販売機(ActionCreator) const inputCoin = (menu) => ( { // 基本オーダー(Action) type: 'WATER', payload: { menu } }); const addTicket = (menu) => ( // 食券オーダー(Action) { type: 'TICKET', payload: { menu } }); // スタッフが食券を厨房に
Reduxの基礎 · takahashiakira/tech_for_web Wiki · GitHub
Dismiss Join GitHub today GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together. Sign up Reduxとは？ ReactはView機能だけに特化しているため、状態管理が複雑なアプリになると、初学者には設計が難しくなってしまうことがあります。 そのため、Reactは他のFWと組んで使われることが多く、その中で最もメジャーなFWの一つがReduxです。 Reduxは状態（State）のみ管理し、View部分はReactをそのまま利用するので、既にReactを導入しているプロジェクトなどに後から導入することも可能です。 Reduxを利用すると、Reactでは
React + Redux- Animation - - DeNA Design
デザイン戦略室フロントエンドエンジニアの吉井です。 昨今の React 実装は、StatelessFunctionalComponent(SFC)を用いて Flux や Redux に状態管理を委譲するデザインパターンが定着していますね。アプリケーションの UX に欠かせないアニメーションですが「SPA とは相性が悪い」という噂を聞いたことがあります。従来の html アニメーションといえば jQuery.animate によるものが定番ですが、jQuery.animate は以下の理由で React と相性が悪いです。 jQuery を使用しないことがほとんどで、ほかライブラリに頼る必要がある。 DOM 参照(ref 参照)のために SFC を諦めないといけない。 Animation 実行中に component を unmount すると参照エラーになる。 Animation の状態を
ReduxでのMiddleware不要論 - Qiita
問題提起 （※タイトルはキャッチーなのにしましたが、Middleware全般の不要論ではありません。非同期処理において不要論です。） Redux使うときに非同期処理はどう書きますか？ 「よくわからないけどMiddleware使うらしい」と思考停止していませんか？ この記事では、Reduxは本来どのように扱うことを想定されているのかと、なぜ非同期処理の文脈でもMiddlewareが出てきたのか、そして「実はMiddleware無くても読みやすく書けるよね」という話をしていこうと思います。 Reduxでの設計を悩む人への個人的な解です。 （気になる・詳しく知りたい箇所などありましたらお気軽にコメントください） この記事のゴール ActionDispatcherという筆者が命名したクラスを使うことで、 複数の非同期処理を含むロジックでも読みやすく書ける ネットワーク通信などを含んでもテストがしや
React + Redux + WP REST API + SSRで爆速ブログを作ったので事例として紹介します
WordPress 4.7では、これまでプラグインとして提供されていたWP REST APIが機能として組み込まれ、標準でREST APIが使えるようになりました。このことにより予想されることは、PHP以外のプラットフォームで、WordPressのブログテーマやWordPressの機能を使ったサービスが今後どんどん生まれてくると言うことです。 ちょうど自分の扱っている新規事業の企画でブログメディアを作ることになりました。新しいメディアを運営する上で、技術的にも注目されるようなものを作りたいと思ったので、今回このWordPressのREST APIを使って、React + Reduxベースでブログを作ることにしました。爆速なブログができあがったので事例として紹介させてください。 LifeGadget（ライフガジェット）人々の日常生活に役立つ情報（ライフハック術、ガジェット、アプリ、サービスな
会社のサーバサイドエンジニアにReactとかReduxのことを説明する資料 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 筆者が、会社のサーバサイド(以下SS)エンジニア(Rails)に社内実績のあまりないReactとかReduxのことを説明する資料です。 この資料の方針 多少 嘘 を教えてでもとりあえずわかった気になってもらう 概念の解説にフォーカスする (2より) 具体的なコードを記載しない (2より) 出来るだけ図解する 主観/偏見に満ちている可能性をきにしない 書いてないこと ReactやReduxにまつわる歴史・経緯・なぜ選ぶのか virtual dom Flux 具体的なコーディング react-reduxの細かいこと/詳しいこと 真面目に勉強
React+Redux+Express+MongoDBでものすごくシンプルなCRUDアプリをつくる - Qiita
#概要 React+Redux+Express+MongoDBでCRUDアプリを作ります。 この記事の目的は、React/Reduxを触り始めた人が サーバーとの通信の方法（より一般的には非同期処理の方法） Reduxにおけるフォームの扱い ExpressによるAPI node.jsからのMongoDBの操作 Herokuへのデプロイ など、主にサーバー側のデータの操作に関わる基本的な事項を学ぶきっかけを作ることです。 この目的に集中するために、それ以外の点については一切気にしないことにします。 そのため、初心者以外の人（上記の内容を理解している人）がこの記事を読んでも得るものはないと思います。 この記事が書かれた背景には、少し前に自分自身がjavascriptによるフロントエンド開発からwebプログラミングを学び始めたころの経験があります。ReactやReduxの基本的な文法の理解を終え
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ReactとReduxでSPAを構築するために参考にした記事 - Qiita
React+Reduxを手っ取り早く試してみたい人向けのなるべく小さいサンプル - Qiita
実践 Redux Saga -Practical Redux Saga-
GitHub - LancersDevTeam/lancers-redux-sample-app
React.js・ReactNative・Redux入門
