脱Reduxを試みて失敗した話、その原因と対策について
さて、年末が近づいてきましたが今年も 「Redux 使うべき使わないべきか」という話で盛り上がりましたね。 僕もずっと悩める人なのですが、@f_subal さんの Tweet や @takepepe さんの Next.js の状態管理 2020 が示すように Read 要件・Write 要件の多さで使い分けるという指針には深く納得をしました。 Redux の代替になるツールやノウハウもより活発に出てきて、Redux 以外の選択肢を考えるにあたって様々な学びがあった 1 年でした。 自分も色々と Redux 以外の選択肢を試していたのですが、その中で「やっぱ Redux を使えばよかった」と思ったときがあったので、これから Redux を剥がそうと考えている人に向けてその失敗談を語りたいと思います。 自分も手探りで正解がわかっていないところなのでアドバイス・反論・指摘などがあれば頂きたいです
「Redux よさようなら」最強の React 実装
useState, useContext を使った状態共有 graphQL BFF + Codegen + Apollo Hooks で型安全なデータ取得 Redux の型定義、Loading 状態の運用、エラー処理、等々煩雑なコードがなくなる 1日一つ強くなる中西とは https://ja.reactjs.org/ React 日本語公式ドキュメントのトップページの翻訳を担当 Apollo Japan User Group 主宰 / 公式ドキュメントチュートリアルを翻訳しました Hasura Japan User Group 主宰 / チュートリアル公開しています JavaScript が中心となった生産性の高い Web App 開発チームの運用、及びその普及活動が今のテーマ => https://apollographql-jp.com/makeMoneyTS/ 毎月 JavaScri
React+Redux未経験者のプロジェクト受入 - Qiita
自己紹介 渡辺 貴明 EngFrontend follow me! アジアクエスト株式会社 フロントエンドエンジニア 今日の話 React未経験者が、 Reduxのプロジェクトにスムーズに参加するため 何をしたか？ 想定する状況 ソースはreact-redux-universal-hot-example を元に複雑にした感じ 大事 アーキテクチャはこんな感じ これから物量をこなす段階 新しく人を追加する ES5のjsはできるがReact触ったことない 必要なこと Reactを覚える必要がある Reduxも覚える必要がある BFFでのAPIの叩き方も覚える必要がある ES2015も覚える必要がある 問題 Reactだけ覚えても仕事に入れない 丁寧に覚える時間はない しかし、覚えないと渡せる仕事がない やったこと 専用のチュートリアル的なものを作成 最小構成のサンプルを作って真似して書いてもら
ReduxでのMiddleware不要論 - Qiita
問題提起 （※タイトルはキャッチーなのにしましたが、Middleware全般の不要論ではありません。非同期処理において不要論です。） Redux使うときに非同期処理はどう書きますか？ 「よくわからないけどMiddleware使うらしい」と思考停止していませんか？ この記事では、Reduxは本来どのように扱うことを想定されているのかと、なぜ非同期処理の文脈でもMiddlewareが出てきたのか、そして「実はMiddleware無くても読みやすく書けるよね」という話をしていこうと思います。 Reduxでの設計を悩む人への個人的な解です。 （気になる・詳しく知りたい箇所などありましたらお気軽にコメントください） この記事のゴール ActionDispatcherという筆者が命名したクラスを使うことで、 複数の非同期処理を含むロジックでも読みやすく書ける ネットワーク通信などを含んでもテストがしや
Reduxの正しい解釈の話
2016年の課題は状態遷移の管理だったと思う。 そのアンサーとして、 Fluxのような実装におけるStore相当にアプリケーションの状態をほぼすべて管理させるReactのようなVirtual DOMを搭載したビューの実装を透過的なユーザーインターフェースとして扱うこの2つの組み合わせにより、アプリケーションの状態と描画される画面が (ほぼ) 参照透過的になる。というのがFluxとReact以降のパラダイムだと思う (理論として) 。 このパラダイムなら、エラーの発生時にアプリケーションの状態を表現するJSONをエラー収集サービスに送るようにして、簡単にバグを再現したりできるし、状態の遷移をテストしていくことで、クラッシュするようなバグのうち大半を検出できる。 Fluxの問題そこで問題が出るのが、Action(Creator) とReducer (Store#reduce())の2要素間のル
「後付の型システム」の活用についてFlowtypeとReduxから考える - Qiita
FlowtypeやTypeScriptは静的解析によって事前に型違反を検知することができる。JavaScriptは動的型付けの言語であり、本来はランタイムにしか型が出現しない。 FlowtypeとTypeScript、ともに「それ自身がランタイムではない」というのが特徴であり、一種のLintツールだと言うことができる。ランタイムではないがゆえに、嘘の事前条件を与えることでそれらを騙すことができるし、自らに有利な制約を追加できるという柔軟性を持つ。 JavaScriptの現実においての型 例を出そう。 type MyUtil = { foo(v: string): number; }; const util: MyUtil = new HogeUtil(); util.foo(1) //=> type error HogeUtil は何かしらのユーティリティ関数の詰め合わせだが、fooにしか
reducer の ノーマライゼーション - Qiita
本来は実体を配列で保持するようなケースを、次のような構成に分ける reducerが返すある状態を、全体を保持するオブジェクトと、全体の各IDを保持する配列に分ける。 全体を保持するオブジェクトのキーを指定して実体を手に入れる。まとまりをそのまま処理する場合は、全体の各IDを保持する配列にmap()を適用し、必要な実体のリストを手に入れる。 なぜ、こうするのか redux のアプローチでは、情報を管理するストアはトップレベルに一つだけある。そしてこのストアは意味のあるデータの塊ごとに reducer を作成し、必要に応じて combineReducers することで合成することができる。擬似的には
Angular 2アプリケーションをimmutable.jsとReduxで構築する | POSTD
過去にJavaScript開発をやったことがある人であれば、 Redux のことは聞いたことがあるでしょう。Reactとともに一般に普及し、開発者の中には「当時のJavaScript関係で一番興奮した出来事だった」、「アプリケーションの構築に大変革をもたらした」、はては「Reduxのおかげで地球温暖化が完全に止まった」と言う人もいるくらいです。 失礼、ちょっと我を忘れてしまいました。しかし、真面目な話、Reduxはアプリケーションの構築方法に、変化をもたらしたのは本当です。この投稿では、Reduxを別のライブラリの Immutable.js と一緒に、Angular 2と統合するやり方をご説明します。 概要 この投稿では、FluxアーキテクチャとReduxの基本的な概念を考えていきます。それから、簡単な連絡先リストのアプリケーションを段階的に作っていきます。初めは基本的なセットアップを構築
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
unstated-next による Redux に頼らない状態管理の考察
Redux Middleware Wars (Japanese)