You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Structuring your Redux application correctly the first time can be difficult -- especially if you don't fully understand the role actions play in the system. The official Redux.js documentation uses examples like addTodo() and requestPosts(). What's wrong with the examples? Adding a Todo This snippet from the Redux documentation is the action creator for adding a todo to a list. let nextTodoId = 0
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: When (and when not) to use Redux – LogRocket 原文公開日: 2018/01/20 著者: Christian Nwamba サイト: LogRocket 2018/03/13: 初版公開 2021/06/03: 更新 Reduxが登場するまで、複雑なタスクを組むときのステート管理は相当つらい作業でした。Reduxは、Fluxというアプリケーションデザインパターンにヒントを得て、JavaScriptアプリでステートを管理するために設計されました。ReduxはReactと併用されることが多いのですが、ReduxはjQueryやAngular、Vueといった別のフレームワークとも併用できます。 Reduxのサイズは非常に小さい(依存関係も含めてわずか2KB)にもかかわらず、アプリの各コンポーネ
2010年代に入ってから、フロントエンドのJavascriptライブラリの群雄割拠でキャッチアップが大変ですが、どれも概念と設計が工夫されていて使っていて楽しいです。 jQueryのDOM操作はなんでもできるけど、やっているうちにDOMをちょこちょこ変更したり、何かの値を無理やりDOMのdata属性にもたせたり、コールバックをあちこちに書いたりして訳が分からなくなってきたりしますからね。 Backbone.jsが出てきてMVCを実現させてみて世間をあっと言わせたかと思えば、Angular.jsがこれだけで大抵のことはなんでもできるフルスタックなフレームワークとして登場してさらに便利になったり。 他にもKnockout.jsとかvue.jsとかいろいろありました。 Reactが登場してから、流れがReactに傾いている(使用する案件が増えている)気がします。 ReactはUIのためのフレーム
1. はじめに TwitterのモバイルWeb (Twitter Lite) は、今年の2月頃のリニューアルによってReactアプリ化されたのですが、今回ツールを使い、この現在のTwitter公式サイトのRedux Store設計を調べてみることにしました。少し昔のこちらのmediumの記事にインスパイアされました。。 2. 準備 react-devtoolsでReduxのStoreを覗き見ることができます。今回Chromeのextensionを使っています。 https://github.com/facebook/react-devtools こちらとても便利で、actionのdispatchまでブラウザからできてしまいます。 インストールしたら、ChromeのDeveloper Toolsを開き、consoleに $r.store.getState(); と入力してみましょう。stor
2019: try hooks + promise debouncing This is the most up-to-date version of how I would solve this problem. I would use: awesome-debounce-promise to debounce the async function use-constant to store that debounced function into the component react-async-hook to get the result into my component This is some initial wiring, but you are composing primitive blocks on your own, and you can make your ow
若干乗り遅れた感がありますが、redux-sagaでズンドコキヨシをやりました。 redux-saga というのは redux で非同期処理を扱うためのMiddlewareで、平たく言うとkoaみたいにGenerator関数を使って非同期処理を同期処理のようなスタイルで書き下せます。思いつきの遊び半分で始めたズンドコキヨシが、正直ここまで redux-saga の本質に迫るサンプルになるとは予想もしていませんでした。redux-saga 自体の詳しいは後日別の記事で解説するとして、redux-saga が秘めているパワーを少しでも感じ取ってもらえたらと思います。 デモはこちら このデモにはredux-devtoolsが組み込まれています。右側の黒っぽいドックがそれです。送り出されたActionのログ表示、 Reset で初期状態に戻す、 Commit で現在の状態をスナップショットして、
【2018/6/18更新】immutable.js を利用せずに、当エントリー同等以上の開発が可能な、FP・型推論の強いモジュールを公開しました。https://qiita.com/Takepepe/items/a79e767b38981c910c3f ドメインモデルの需要 フロントエンドフレームワークでプロダクトを作り込んでいくと、ビジネスロジックが view に介入しすぎてしまうことが少なからずあります。下記の様なビジネスロジックが散在しているコードに、スケール耐性があるとは思えません。リリース当時は単純だったものが、複雑に変化していくケースは往々にしてあります。 function TodoItems (props) { const { todos, updateTodo, deleteTodo } = props const items = todos.map(item , i) =
immutable.js Advent Calendar 2017 2 日目の投稿です。「Redux に immutable.js を導入すると良いらしいが、まだ利用したことがない」という方向けの内容になります。「Reducer の Object.assign が手短に書ける便利ライブラリ」と認識されている方もいるかもしれません。immutable.Record は、immutable な collection を保持する Object に関数を付与することができ、モデルとして利用することが可能です。 React 状態管理の定番感が強い Redux は、その他にも多くの View ライブラリでバインディングがあります。View フレームワーク非使用のページでも、Redux を導入する価値は大きいです。しかし通常の ReduxStore の中身は巨大な json に過ぎず、MVVM アーキテ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く