サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
【READYFOR】実践！フロントエンド分離戦略::発表資料 https://readyfor.connpass.com/event/198730/
さて、年末が近づいてきましたが今年も 「Redux 使うべき使わないべきか」という話で盛り上がりましたね。 僕もずっと悩める人なのですが、@f_subal さんの Tweet や @takepepe さんのNext.js の状態管理 2020 が示すように Read 要件・Write 要件の多さで使い分けるという指針には深く納得をしました。 Redux の代替になるツールやノウハウもより活発に出てきて、Redux 以外の選択肢を考えるにあたって様々な学びがあった 1 年でした。 自分も色々と Redux 以外の選択肢を試していたのですが、その中で「やっぱ Redux を使えばよかった」と思ったときがあったので、これから Redux を剥がそうと考えている人に向けてその失敗談を語りたいと思います。 自分も手探りで正解がわかっていないところなのでアドバイス・反論・指摘などがあれば頂きたいです
問題提起 （※タイトルはキャッチーなのにしましたが、Middleware全般の不要論ではありません。非同期処理において不要論です。） Redux使うときに非同期処理はどう書きますか？ 「よくわからないけどMiddleware使うらしい」と思考停止していませんか？ この記事では、Reduxは本来どのように扱うことを想定されているのかと、なぜ非同期処理の文脈でもMiddlewareが出てきたのか、そして「実はMiddleware無くても読みやすく書けるよね」という話をしていこうと思います。 Reduxでの設計を悩む人への個人的な解です。 （気になる・詳しく知りたい箇所などありましたらお気軽にコメントください） この記事のゴール ActionDispatcherという筆者が命名したクラスを使うことで、 複数の非同期処理を含むロジックでも読みやすく書ける ネットワーク通信などを含んでもテストがしや
となります。 どういうことかというと、modulesの中の1ファイルにReducer, ActionCreator, Constants などをまとめて1ファイルで扱ってしまおう（そしてそれをmodulesとして管理しよう）という解決法になります。 なぜコレが嬉しいのか？ Reduxはfluxの実装として筋がよく、一気に普及しました。 そこで用いられているReducer, ActionCreatorなどの登場人物は、役割としては別であるものの実際にはお互いにConstantsで紐付けられていて実質的に密結合です。それぞれ単体では存在しえません。 なので１ファイルで扱ってしまっても不都合はないのです。 ちなみにテストはどう書くかというと、上記の通り登場人物は変わらないため、Reduxの定石通りにReducer, ActionCreatorの単位でテストを書くことができます。 まとめ r
※更新履歴webpack2-rc & TS2.1 & @types対応webpack2 & TS2.3 対応React16-beta & TS2.4 対応 こちらの記事の続編です。 http://qiita.com/uryyyyyyy/items/63969d6ed9341affdffb 問題提起 今時、型のない言語とか使いたくないですよね！（2回目）ReactといえばRedux（flux実装の実質デファクト）。 ということでTypeScriptでReduxのサンプルを作ってみます。 （reduxのおよその仕組みは他の記事を読んでください。） 環境 NodeJS 8.2React 16.0-betaTypeScript 2.4 $ tree . . ├── index.html ├── package.json ├── src │ ├── counter │ │ ├
1. useReducerでcombineReducersだけ使ってみる reduxにおいてはcombineReducersを利用してネストすることが出来た。 hooksの機能としてはこの部分だけは提供されてないので、reduxから流用して組み合わせることをやってみる 例えばこんなreducer import { combineReducers } from "redux" const counter = (state = 0, action) => {switch (action.type) { case "INCREMENT": return state + 1 case "DECREMENT": return state - 1 } return state } const inputValue = (state = "foo", action) => {switch (acti
4ヶ月ほど前、 Flow & Redux で Reducer の実装パターンを考える という記事を書いたが、 reducer を型付けするという目的は達しているものの、明らかに記述量が増えて冗長だという問題があった。 ところでこういう記事を見つけた。 これを flow 向けに書き直した、というかセマンティクスが一緒だったので、そのまま動いたのだが、これを自分向けに書き直したらとてもいい感じになった. flow は v0.54.1 コード // @flow type __ReturnType<B, F: (...any) => B> = B type $ReturnType<F> = __ReturnType<*, F> // Actions const INCREMENT = 'counter/increment' const ADD = 'counter/add' export func
この記事は古くなりました。redux-promiseは不要です。 redux で非同期アクションを使う (https://qiita.com/takaki@github/items/737630f112208832a1fd) を読んで下さい。 前提Reactreact-reduxreact-actions Promise Redux で Action を処理に非同期処理，ajax を使おうとすると書き方が少しめんどくさい。 redux-promise というミドルウェアを使うときれいに書けるのだが README にまともに使い方の説明が書いてない。 少し解説をする。 サンプル importReact from 'react'; importReactDOM from 'react-dom'; import {createStore, combineReducers, apply
React/Redux/Node.jsのSSR/SPAを速くする6つのチューニングポイント：大規模ブログサイト表示速度改善 大解剖（終）（1/3 ページ） 2004年から続くブログサービス「アメブロ」が2016年9月にシステムをリニューアル。本連載では、そこで取り入れた主要な技術や、その効果を紹介していく。今回は、React/Redux/Node.jsを使ったIsomorphicJavaScript特有のパフォーマンスチューニング手法や実際にあった問題および、その解決方法について。 2004年から続くブログサービスである「アメブロ」は、2016年9月にシステムをリニューアルしました。本連載「大規模ブログサイト表示速度改善 大解剖」では、そこで取り入れた主要な技術や、その効果を紹介しています。 アメブロのリニューアルでは、React/Reduxを採用し、サーバサイドとフロントエンド両方での
LogRocket’s GalileoAI watches everysession, surfacing impactful user struggle and key behavior patterns. One of the greatest strengths of Redux is debuggability — bylogging actions and state during an app’s execution, developers can easily understand codeerrors, race conditions,networkerrors and other sources of bugs. In local developmentit is standard practice to use tools like redux-logge
/* @flow */ // constants const INCREMENT = 'increment' const ADD = 'add' export const Actions = { INCREMENT, ADD } // actions export type IncrementAction = { type: typeof Actions.INCREMENT } export type AddAction = { type: typeof Actions.ADD, payload: number } export type CounterAction = IncrementAction | AddAction // reducer type CounterState = { value: number } export default (state: CounterStat
Want to learnReact? Check out my new courseReact for Beginners:Build and app, and learn the fundamentals. DissectingTwitter’s Redux StoreIf you don’t already knowTwitter’s mobile website is on a new web stack which includesReact and Redux 🎉. After hearing the news I thoughtit would be fun to dig into their Redux store, and see how in the hell they organize all them tweets in their state tr
東京Node学園祭2016で話したブッキングテーブルのやつ
みなさんこんにちは、サイバーエージェントでフロントエンドを中心に開発しています原(@herablog)です。 アメブロでは、2016年9月にフロントエンドをJavaベースのアプリから、node.js・Reactベースのアプリへとシステムの移行をおこないました。本記事では、その移行へといたる経緯やゴール、システム設計、その結果についてお伝えします。 リリース直後に気づいているツワモノな方もいらっしゃいました。 アメブロのSP版がReactのSSRでフルリニューアルしたのを観測した — hr (@hrloca) 2016年9月1日 システム移行へといたる経緯 2004年から始まり、日本国内で最大規模のブログサービスとなったアメブロは、システムの肥大化や多数の関係者が存在したことによるモジュール・導線の急増などの理由により、ページ表示スピードが遅くなり、ページビュー数にも明らかに影響を与えるよう
このページではMayonezに掲載されている「ITキャリア」に関する記事をたくさんご紹介しています。Mayonezで「ITキャリア」に関する記事をお楽しみください。 ZEXAVERSE ゼクサバースはWEB3.0を身近なものにZEXAVERSE（ゼクサバース）という企業を聞いたことはないでしょうか。この記事では、ZEXAVERSEの概要やZEXAVERSEのサービスなどについてくわしく紹介していきます。ZEXAVERSEについて知りたい方、興味がある方は是非ご覧ください。Unity入門に最適なチュートリアルサイトまとめ・比較今回はUnityでのゲーム開発を始めるときに参考になる、入門チュートリアルサイトをまとめました。全くプログラミング初心者の方から、他のプログラミング言語で開発をしたことがある方を対象にまとめています。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
