前回の記事では同期的なTODOアプリを例としてReact + Reduxの基本的な使い方を学びなおしました。 今回は非同期処理の扱い方を勉強してサンプルのアプリケーションを作ったので、要点などをメモしておきます。 Reduxでの非同期処理について 実際のアプリケーションではAPI通信など非同期処理が必ずと言っていいほど入ってくると思います。 たとえば fetch() を使って何かデータを取ってくる Action creator を定義したいとします。 const fetchSomeThing = (url) => { return fetch(url) .then(res => res.json()) .then(json => { return { type: 'FETCH_DATA', payload: { response: json } } }); }; fetchSomeThin

TypeScriptでReactをやるときは、小さいアプリでもReduxを最初から使ってもいいかもねというお話 前日の丸野さんがReduxを分かりやすく解説してみたというReduxの基本的な紹介を行いました。Reduxはコンパクトなライブラリながらよく考えられた仕組みです。Jetpack ComposeやらFlutterやら、ReactインスパイアなGUIフレームワークも増えているので、JavaScript（TypeScriptではなく） + Reduxをやってみるのは、ウェブに限らず、今後のユーザーインタフェース関連のコードを触るための理解力向上には良いと思います。 本エントリーは、プロダクションコードでたくさんRedux周りにもreducerなどを実装しなくてはいけなくなったときの次のステップとして、Redux Toolkitの紹介をします。 たいてい、Reduxは導入コストが大きく、

React Reduxを使ってプロダクトを作りはじめて、かれこれ半年くらい経ちます。 しかし、どうもうまく書けていない気がすることがときどきあり、悩んでいたところ、ツイッターで次のような助言をもらいました。 @__tai2__ 達人かどうかは微妙なところがありますが、ある程度の規模のコードはここにリンク集あります https://t.co/B79B5s1DTe — Yuki Kodama (@kuy) 8 December 2016 この記事は、上記のリンク集でまとめられている実際のReact Reduxプロダクトのソースコードを調査することで、筆者がふだんReact Reduxで開発をしていて感じる疑問への答えを探る試みです。 筆者が答えを得たいと思っている疑問は次の3つです 1 Storeはどんな具合に階層化すべきか Store初期化(hydration)用データの定義はどうすべきか

ducksというデザインパターンを使用して簡単なTodoアプリを作成しようと思います。 機能としては以下になります。 タスクを追加できる タスクが終わったかどうかのラベルをつけることができる 環境構築 今回は自分みたいにブログの更新に時間がない方などが手軽にちょちょいと構築できるツールでcreate-react-appを使用します。 以下のコマンドを実行します。 create-react-app ducks_todo ducksについて ducksの公式サイトには以下のようなルールが記載してあります。 reducerはexport deaultをしなければならない action creatorは関数してexportしなければならない actionは定数で定義する などが挙げられます。 早速実際にアプリを作成していきましょう。 まずプロジェクトフォルダに移動してください。 cd ducks_

Ducks というデザインパターン Reduxのファイル構成は『Ducks』がオススメ – Qiita The Ducks File Structure for Redux – S.C. Barrus – Medium erikras/ducks-modular-redux: A proposal for bundling reducers, action types and actions when using Redux Redux Way React + Redux で構築する際のディレクトリ構成としてよく知られるのは、redux-way と呼ばれるやつです。Reduxの登場人物であるところの、container, reducer, action(action creator) それぞれについてディレクトリを分けてファイル単位で分割します。ディレクトリ構成はこんな感じになります。 s

Reactでのシングルページアプリケーションを作成していると、必ず意識しなくてはいけないのが状態管理です。Hooks APIの登場により、アプリケーションの状態管理方法にも選択肢が増えてきました。2023年のReactアプリケーションの状態管理方法はどのような選択肢が考えられるでしょうか？ 状態管理の選択肢 Reactの状態管理として本記事でには紹介している手法は下記の4通りになります。 ローカルステート（useState、useReducer）での管理 Hooks APIのuseReducer、useContextを使った管理 Reduxによる管理 Recoilによる管理 状態管理フレームワークは他にも選択肢がありますが、Reduxを紹介します。理由は、候補として挙がるライブラリの中でもっともシェア数が多く、知名度が高いためです。 下図は、主要なReact状態管理フレームワークのダウンロ

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

Do you have experience using React? Have you heard of Redux, but you've put off learning it because it looks very complicated and all the guides seem overwhelming? If that's the case, this is the article for you! Contain your fear of containing state and come along with me on this relatively painless journey. Prerequisites You must already know how to use React for this tutorial, as I will not be

概要 少し前まではVue.jsを書いていたのですが、最近Reactを勉強し始めてReduxの壁が立ちはだかりました。。。 Vuexと違って複雑すぎるReduxが中々自分の中で整理できなかったので、改めて整理しました。 この記事はReduxの使い方の説明やReduxの概念を深く追求したりすることが目的ではなく、あくまで自分の中でReduxの仕組みなどを頭の中で整理し、 その整理したものを実装の仕方と結びつけることを目的として書いたただのメモです あと冒頭の部分は自分の中でしっくりきた解釈なので間違っていたらご指摘頂けると幸いです。 Reduxの目的 Vuexを用いてvue開発をしていた時は vuex = バケツリレー防止剤的な用途で使っていて、Reduxも同じ感覚で使うと思っていたけどバケツリレー防止剤ではないらしい(vuexもそうかもしれん) バケツリレーを防ぐだけならコンテクストを使えば

はじめに この記事では、React+Reduxを使用してカウントアプリを作ってみたいと思います。 下記が完了している前提で話を進めていくので、インストールされてない方は実施してください。 Node.jsのインストール パッケージマネージャー yarnのインストール creat-react-appのインストール 参考：https://qiita.com/rspmharada7645/items/25c496aee87973bcc7a5 1. プロジェクトを作成する まず、任意のディレクトリに移動し、create-react-appコマンドでプロジェクトを作成します。

ReactとReduxの勉強中です。react-reduxのconnect()の理解に時間がかかったので、同じように悩んでいる方に向けて図にして説明します。初心者向けの説明なので、正確さよりもわかりやすさを重視しています。 目次 Reduxの世界 Reactの世界 React-reduxの世界 connect()の引数 まとめ あとがき Reduxの世界 まずはReduxの世界です。シーケンス図にするとこんな感じです。 viewはユーザの動作(クリックなど)が発生したら、actionを作成してstoreに渡す(dispatchする)。 storeは状態(state)を保持している。dispatchが呼ばれると、storeはactionとstateをreducerに渡す。 reducerはactionとstateを受け取り、新たなstateを作成して返す。 stateが更新されるとviewに

ホームページ制作コーポレートサイトからLP制作、オウンドメディアサイト、ECサイトなどさまざまなニーズにお応えすることができます。Web開発Webサービスなど、フロントエンド、バックエンドを踏まえた構築が可能です。SEOコンサルティング内部対策をメインにお客様の色にあったSEOコンサルティングを展開してまいります。HTMLメール制作通常のHTMLメールからレスポンシブ対応したHTMLメールまで多岐に渡り制作することが可能です。ECコンサルティングページ準備中ページ構成変更やアクセススピードの改善などページ内施策などサイト全体のブランディングを含めたコンサルティングをメインにお手伝いいたします。保守・運用ページ準備中WordPressやECツールなどを使用したサイトの保守と管理を行っております。