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
投稿者:K 投稿公開日:2018年11月29日 投稿カテゴリー:フロントエンド 投稿コメント:0件のコメント React + Reduxで作るアプリケーションをいくつか作っていて、フォルダ構成に悩みました。 調べてみると、以下の方法にしてる人が多いみたいです。 A: コンポーネントやコンテナなどのフォルダ分けする B: ドメイン単位で分ける 私がしっくり来たのはドメインで分ける方法です。 以下のURL構造のSPAのフォルダ構成を例にします。 https://example.com/posts https://example.com/post/:id https://example.com/posts/new パターンAのフォルダ構成は以下になります。 /components - Posts.tsx - Post.tsx - NewPost.tsx /containers - Post.ts
概要 sagaを複数のファイルで書いといて一つのrootSagaにまとめて使うなら、各ファイルで、effectをexportし、rootSaga内で、yield allすればOK 背景 reducerは複数のファイルで個々に管理して、combineReducersでまとめてexportするのが主流 sagaでも同じように、関心事に複数のファイルで分けて管理して、まとめてexporとして使いたい 環境 redux-saga: 0.16.0 手順 item.jsとregsiter.jsでsagaを用意し、各ファイル毎にeffetctを配列にまとめてexportする index.jsでeffetcの配列をimportしてyield allでrootSagaにまとめる item.jsとregsiter.jsでsagaを用意し、各ファイル毎にeffetctを配列にまとめてexportする ポイントは
とりあえず関東最速でReactアプリをTypeScriptで作るためのレシピです 注1: このサンプルではReduxを使いますが、もしImmutabilityを必要としないのであればUnduxを代替に検討してみてください! Reduxは関数型エッセンスを守るために非常にファイル数が多くなります。 →【Reduxに疲れた人のための】Undux入門 注2: React+Reduxはデフォルトの最小構成でもファイル数が多く複雑、かつTypeScriptで型を付けても完全に実行時エラーをゼロにするのは不可能です。よりアプリケーションの質を高めるためには、Reduxの起源となったElmの利用を検討してみてください→関東最速でElm+JSなアプリの開発環境を作る create-react-app 最速で作るにはcreate-react-app一択です。--typescriptオプションが利用できるので
Re-ducks というディレクトリ構成のベストプラクティスについてまとめる。Re-ducksパターンを使うことで、React + Redux を用いた開発がよりメンテナンスしやすいものになる。 Ducks パターン 名前からもわかるように、Re-ducks は Ducks というパターンをベースにしている。 erikras/ducks-modular-redux Ducks パターンが解決すること: actionType、action、reducerが散らばっててつらい 結局のところ actionType、action、reducer は密結合なので、ducksパターンではこれら3つを1つのファイルにまとめる。 // widget.js // Actions const LOAD = 'my-app/widgets/LOAD'; const CREATE = 'my-app/widget
I have a web page with a search panel. Search panel has several input fields: id, size, ... What I want is when user set search values (for example: id=123 and size=45) and press a search button: searchState in Redux reducer should be updated with new search values (id=123 and size=45) URL should be changed to "http://mydomain/home?id=123&size=45" And on the other hand if the user changes URL to h
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: 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のためのフレーム
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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く