Redux の変更点

https://dotnetdevelopmentinfrastructure.osscons.jp:443/index.php?Redux

[ トップ ]   [ 編集 | 差分 | バックアップ | 添付 | リロード ]   [ 新規 | 一覧 | 単語検索 | 最終更新 | ヘルプ ]

• 追加された行はこの色です。
• 削除された行はこの色です。
• Redux へ行く。
• Redux の差分を削除

---

「[[.NET 開発基盤部会 Wiki>http://dotnetdevelopmentinfrastructure.osscons.jp]]」は、「[[Open棟梁Project>https://github.com/OpenTouryoProject/]]」,「[[OSSコンソーシアム .NET開発基盤部会>https://www.osscons.jp/dotNetDevelopmentInfrastructure/]]」によって運営されています。

-[[戻る>React#f382342b]]

*目次 [#naa4a030]
#contents

*概要 [#u9017fa2]
[[Fluxアーキテクチャ>Flux]]に基づいて設計された[[React]]用フレームワーク

*特徴 [#a9d1237d]
-上記の[[Flux]]の影響を受けていることから、データの流れは一方向になる。

-[[Actions>#k776a8d8]] -> [[Reducers>#g0c704a9]] -> [[Store>#f2fe7ee5]]の3つの部分から構成される。
-[[Store>#f2fe7ee5]]が状態を持ち、[[Action>#k776a8d8]]が発生した際に、[[Reducer>#g0c704a9]]を使って[[Store>#f2fe7ee5]]の状態を更新する。
-[[View>#h4b38b3d]]に関しては、[[Store>#f2fe7ee5]]の用意するAPIを使うことで、状態の購読、更新・取得ができる。

**三原則 [#ed7e27b9]

***Single source of truth [#rbc7b02b]
状態は一つの[[Store>#f2fe7ee5]]のobjectツリーに格納される。

***State is read-only [#g287539a]
[[Action>#k776a8d8]]を発火することが、状態を更新する唯一の方法。

***Changes are made with pure functions [#k1556646]
状態が[[Action>#k776a8d8]]によってどのように変更されるか、~
定義するために純粋な（[[副作用>#m4de3bee]]のない）[[Reducer>#g0c704a9]]を書く。

**ドメイン [#wdd85318]

***Actions [#k776a8d8]
-[[View>#h4b38b3d]]等から発火されて作られるオブジェクト

--実体
 {
     type: "アクションの種類を一意に識別できる文字列またはシンボル",
     payload: "アクションの実行に必要な任意のデータ",
 }

--定義（actions.js
 export const ACTION_TYPE = 'アクションの種類を一意に識別できる文字列またはシンボル';
 export const ActionType = hoge_value => ({type: ACTION_TYPE , payload: hoge_value });

-[[View>#h4b38b3d]]のconnect関数のmapDispatchToProps引数（デリゲート）で定義・生成される。

***Reducers [#g0c704a9]
-[[FluxのDispatcher>Flux#o1ac7ccf]]の代替。
-関数型プログラミングにおいて畳み込み演算を意味する副作用のない関数。
--初期状態はデフォルト引数で定義される。
--状態を変更するには、新しいものを合成するように書く。

-定義（reducer.js
--
 import { ACTION_TYPE } from './actions';
 
 export default (state = {value: 0}, action) => {
     switch (action.type) {
         case ACTION_TYPE:
             return { ...state, value: state.value + action.payload };
         default:
             return state;
     }
 }

--大規模な開発においてReducerを細かく分割する場合は、~
combineReducersという関数を用いて書く。
 import { combineReducers } from 'redux';
 
 const XXXXReducer = (state = {...json...}, payload) => {
     /* 省略 */
 };
 const YYYYReducer = (state = {...json...}, payload) => {
     /* 省略 */
 };
 const ZZZZReducer = (state = [...json...], payload) => {
     /* 省略 */
 };
 export default combineReducers({
     XXXX: XXXXReducer,
     YYYY: YYYYReducer,
     ZZZZ: ZZZZReducer,
 })

***Store [#f2fe7ee5]
-シングルトンで、インスタンスの管理不要。
-状態（state）を格納する。
-アプリケーションに必ず1つしか設けらない。
-1つのStoreですべての状態を管理する。
-イメージとしては「でっかいJSONの塊」。

***View [#h4b38b3d]
-Reduxに参加するためにはReactReduxによって提供されるconnect関数を用いる。
--react-reduxをインストールして、
 npm install react-redux --save
--react-reduxをインポートする。
 import { connect } from 'react-redux';

-変更は、propsを通じて渡されてくるので、
 connect(mapStateToProps, mapDispatchToProps)(Component)

--connect関数のmapStateToProps引数（デリゲート）は、stateとpropsのバインディングを定義する。~
---以下のように書いても動作するが、
 state => state
---以下のように必要なものだけを選別してpropsにバインドする。
 state => ({ value: state.value })

--connect関数のmapDispatchToProps引数（デリゲート）は、
---dispatchで、Reducerに向けた通知を定義する。
 { ActionType }
---[[Actions>#k776a8d8]]の定義は、以下のようにインポートする。
 import { ActionType } from './actions';

-Container
--以下のようなケースでは、Containerが集約してconnect関数でバインドする。
 (<UsersList>
     <User />
     <User />
     <User />
     <User />
 </UsersList>)
--可読性を高めるため、Componentとディレクトリが分けられることが多い。

*[[Flux]]との違い [#iec21264]

**概要 [#o4135165]

***Fluxの場合 [#t007920d]
Reactコンポーネント自身が個別に状態管理をする。

***Reduxの場合 [#hf1f85ea]
-状態管理する専用の場所([[Store>#p3c60442]])で状態管理する。
-Reactコンポーネントはそれを映すだけに徹する。

-コードの削減と関数の再利用性の向上
--[[Dispatcher>#o1ac7ccf]]がない
--[[Store>#p3c60442]]がシングルトンでインスタンス管理が不要。

**参考 [#u1cadbd9]
-javascript - Why use Redux over Facebook Flux? - Stack Overflow~
http://stackoverflow.com/questions/32461229/why-use-redux-over-facebook-flux

*Saga [#w6600418]

**概要 [#hefd39a8]

-Reduxは、最小限で、フルスタックとは言えない薄さ。~
（なので、機能を補う幾つかのサブ・プロジェクトがある）

-[[Reducer>#g0c704a9]]の中には[[副作用>#m4de3bee]]を生む処理を書いてはいけない。

-[[副作用>#m4de3bee]]を生む処理の設計の指針について、~
模索が必要で、その筆頭が 非同期処理の扱いになる。
--処理をどこに書くのか、
--どのように書くのか、
--どこから呼び出すべきか、

-解決方法としてredux-sagaがある。

**詳細 [#n10e6f40]
・・・

**参考 [#x632117b]
***redux-saga [#yffd9def]
-redux-sagaで非同期処理と戦う~
https://qiita.com/kuy/items/716affc808ebb3e1e8ac
-Redux-Observable Epic vs Redux-Saga: 何が問題なのか | POSTD~
https://postd.cc/redux-observable-epics-vs-redux-sagas/

***その他 [#q24c95d3]
-redux
--redux-thunk
--redux-promise
-react-side-effect

*関数型言語の副作用 [#m4de3bee]

**概要 [#n1bfc7c6]
-「戻り値の値」を変えることを「作用」
-「戻り値以外の値」を変えることを「副作用」

**参考 [#b7e67114]
-オブジェクト指向と関数型で副作用の扱いが違うって知ってた？ - セカイノカタチ~
https://qtamaki.hatenablog.com/entry/2015/01/16/135703

*ツール類 [#ue3e2299]
以下のようなツールが存在しているらしい。

**Redux DevTools [#efd34ef0]
デバッグし易くなるらしい。
-概要
--デバッグし易くなるらしい。
--...。

-参考

--zalmoxisus/redux-devtools-extension: Redux DevTools extension.~
https://github.com/zalmoxisus/redux-devtools-extension

--Reduxのデバックに必須！Redux DevToolsの使い方 | Harkerblog~
https://harkerhack.com/react-redux-devtools

--Qiita
---Redux Devtools Extensionを使った時のこの感動を伝えたい~
https://qiita.com/daiki7nohe/items/fa0f496eebb0980f86da
---Redux 開発で絶対使うべき Redux DevTools Extension 解説~
https://qiita.com/elzup/items/fc24588b2c6bae0834a6

**Redux Toolkit [#t0fd4d79]
手書きでやるのはドMらしいです。
-概要
--手書きでやるのはドMらしいです。
--Ducksスタイルを強要され、後付が困難か？

-参考

--Redux Toolkit~
https://redux-toolkit.js.org/

--HookとRedux ToolkitでReact Reduxに入門する | Hypertext Candy~
https://www.hypertextcandy.com/learn-react-redux-with-hooks-and-redux-starter-kit

--Qiita
---Redux の記述量多すぎなので、 Redux の公式ツールでとことん楽をする。 ( Redux Toolkit)~
https://qiita.com/Ouvill/items/a76e9cbce569d01f2931
---Redux Toolkit で Redux の煩わしさから解放される~
https://qiita.com/__sakito__/items/e446d0f0974f2e12a5f5

*Reduxの問題点 [#p62b97b5]

**感想 [#eca579e9]
-モジュールが分割できるのは良い。
-ただし、
--トラブル・シューティングが困難
---[[combineReducersを使うとStoreが階層化される>Reactのセカンド・ステップ#tef34d40]]
---Uncaught TypeError: this.props.XXXX is not a function

--パターン
---...から外れると途端に（設計/実装に関して）何をしてイイか解らなくなる。
---...を決めて最小セットを作成してそれに準拠して開発する必要がある。

-やった感想として、
--複雑でパターン化＆RADのIDEによるサポートが無いと厳しい気がする。
--早々に、[[Hooks]]に行ってしまうのがイイのかも知れない。

**参考 [#q775761c]
-Qiita
--react-reduxで「dispatch is not a function」にハマった場合の対処法~
https://qiita.com/gaku3601/items/f77523bca6661f72f46a
--Reduxは不要ではないか？~
https://qiita.com/daijinload/items/c7015b1117c5beb7e49f
--【Reduxに疲れた人のための】Undux入門~
https://qiita.com/IzumiSy/items/c26f69219178b79f586d
--React Nativeの実は使ってはダメなライブラリ素晴らしいライブラリ(随時更新)~
https://qiita.com/kaba/items/569aafd80889bb5d9328

-mizchi の Redux 考 - Togetter~
https://togetter.com/li/911228

-React-Reduxの使い方をやっと覚えたので動かした~
https://naokeyzmt.com/blog/react-redux-handson/

-JavaScript: Reduxが必要なとき/不要なとき（翻訳）~
TechRacho（テックラッチョ）〜エンジニアの「？」を「！」に〜｜BPS株式会社~
https://techracho.bpsinc.jp/hachi8833/2018_03_13/53183

-JSフレームワーク事情2020年始め｜erukiti｜note~
https://note.com/erukiti/n/na654ad7bd9bb

*参考 [#t11e7db0]
-Usage with React - Redux~
https://redux.js.org/basics/usage-with-react

-Reduxの実装とReactとの連携を超シンプルなサンプルを使って解説 | maesblog~
https://mae.chab.in/archives/2885

-React + Redux で SPA を作る | ギャップロ~
https://www.gaprot.jp/pickup/react-redux-spa

-イメージで覚えるReact + Redux - ユニファ開発者ブログ~
http://tech.unifa-e.com/entry/2017/07/10/135509

**Qiita [#j57500d7]
-結局FluxやらReduxやらって何なのか個人的なまとめ~
https://qiita.com/syossan27/items/7e1b2e07ac68b96bdaa7

-たぶんこれが一番分かりやすいと思います React + Redux のフロー図解~
https://qiita.com/mpyw/items/a816c6380219b1d5a3bf
--Tutorial: Intro To React - React~
https://reactjs.org/tutorial/tutorial.html
--Example: Todo List - Redux~
https://redux.js.org/basics/example-todo-list

-Redux入門【ダイジェスト版】10分で理解するReduxの基礎~
https://qiita.com/kiita312/items/49a1f03445b19cf407b7
--1日目 Reduxとは~
http://qiita.com/kiita312/items/b001839150ab04a6a427
--2日目 Reduxの基本・Actions~
http://qiita.com/kiita312/items/8f8d047e5cbd87399ccb
--3日目 Reduxの基本・Reducers~
http://qiita.com/kiita312/items/7fdce94912d6d9c801f8
--4日目 Reduxの基本・Stores~
http://qiita.com/kiita312/items/377787c24efac64f2495
--5日目 Reduxの基本・Data Flow~
http://qiita.com/kiita312/items/ae3ce31521ad24dd699f
--6日目 ReduxとReactの連携~
http://qiita.com/kiita312/items/d769c85f446994349b52

-React+Redux入門~
https://qiita.com/erukiti/items/e16aa13ad81d5938374e

-ざっくり React with Redux チュートリアル~
https://qiita.com/pullphone/items/d28baeb296666a4847b8

-最小のReact+Redux~
https://qiita.com/Chayata/items/28bc6f6af4bc41e89e03

-Redux勉強用に簡単なサンプルを作ってみた~
https://qiita.com/DJ_Middle/items/ffa08f983df471a5c6f8

**POSTD [#f665cd8e]
-モバイル上のJSフレームワークの実行可能性 – ReactとRedux~
https://postd.cc/viability-of-js-frameworks-on-mobile/

-Angular 2アプリケーションをimmutable.jsとReduxで構築する~
https://postd.cc/angular2-with-immutablejs-and-redux/

-Reduxのパターンとアンチパターン~
https://postd.cc/redux-patterns-and-anti-patterns/

-Redux-Observable Epic vs Redux-Saga: 何が問題なのか~
https://postd.cc/redux-observable-epics-vs-redux-sagas/

**Medium [#b1ad0dec]

***terrierscript [#e26e5c05]
-[[Reactの新Context APIとRedux is deadはどう関係するのか？>https://medium.com/@terrierscript/react%E3%81%AE%E6%96%B0context-api%E3%81%A8redux-is-dead%E3%81%AF%E3%81%A9%E3%81%86%E9%96%A2%E4%BF%82%E3%81%99%E3%82%8B%E3%81%AE%E3%81%8B-6d12a32f2f0c]]

***inuscript [#eb2c5754]
-Vueを昔触った後Reactをどっぷり触ってもう一回Vueを触ってReactに戻って得た感想~
https://medium.com/inuscript/vue-and-react-comparision-6c7cb44f18ba

**[[Reactのセカンド・ステップ]] [#p00b6737]

**マイクロソフト系技術情報 Wiki [#sc24f245]
-ASP.NET Core React+Reduxテンプレート~
https://techinfoofmicrosofttech.osscons.jp/index.php?ASP.NET%20Core%20React%2BRedux%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88

       

Site admin: TechInfoOfMicrosoftTech

PukiWiki 1.4.7 Copyright © 2001-2006 PukiWiki Developers Team. License is GPL.
Based on "PukiWiki" 1.3 by yu-ji. Powered by PHP 5.3.3. HTML convert time: 0.002 sec.