- 追加された行はこの色です。
- 削除された行はこの色です。
「[[マイクロソフト系技術情報 Wiki>http://techinfoofmicrosofttech.osscons.jp/]]」は、「[[Open棟梁Project>https://github.com/OpenTouryoProject/]]」,「[[OSSコンソーシアム .NET開発基盤部会>https://www.osscons.jp/dotNetDevelopmentInfrastructure/]]」によって運営されています。
-[[戻る>ASP.NET Core SPAテンプレート]]
* 目次 [#xccdc3f3]
#contents
*概要 [#b1d27879]
https://github.com/OpenTouryoProject/SampleProgram/tree/master/Template/SPATemplate/ReactReduxTemplate
*構成 [#icfa4303]
**フォルダ [#p0d46158]
ReactReduxTemplate
├ ClientApp
| ├ components
| | ├ Counter.tsx
| | ├ FetchData.tsx
| | ├ Home.tsx
| | ├ Layout.tsx
| | └ NavMenu.tsx
| ├ css
| | └ site.css
| ├ store
| | ├ Counter.ts
| | ├ index.ts
| | └ WeatherForecasts.ts
| ├ boot-client.tsx
| ├ boot-server.tsx
| ├ configureStore.ts
| └ routes.tsx
├ Controllers
| ├ HomeController.cs
| └ SampleDataController.cs
├ Views
| ├ Home
| | └ Index.cshtml
| ├ Shared
| | ├ _Layout.cshtml
| | └ Error.cshtml
| ├ _ViewImports.cshtml
| └ _ViewStart.cshtml
├ wwwroot
| └ favicon.ico
├ .gitignore
├ appsettings.Development.json
├ appsettings.json
├ npm-shrinkwrap.json
├ package.json
├ Program.cs
├ ReactReduxTemplate.csproj
├ Startup.cs
├ tsconfig.json
├ webpack.config.js
└ webpack.config.vendor.js
**スタック [#v524902f]
[[ASP.NET Core React.jsテンプレート]]に[[Redux>https://dotnetdevelopmentinfrastructure.osscons.jp/index.php?Redux]]が追加されている。
*変更点 [#u56fb043]
**追加 [#j3e6e9b7]
以下が追加されている。
├ store
| ├ Counter.ts
| ├ index.ts
| └ WeatherForecasts.ts
├ boot-client.tsx
├ boot-server.tsx
├ configureStore.ts
***store [#de379c3c]
TypeScriptなので、ReducerではなくBean的にStoreとして定義するらしい。~
(実際は、ココで、Reducer、Action、Storeが定義される)
-storeフォルダの追加
store
├ Counter.ts
├ index.ts
└ WeatherForecasts.ts
--1つのJSONではなく複数のBeanとして定義してある。
--Store、Action、Reducerの定義~
(非同期処理は、Reducerに書かれるのでコチラ)
--Store、Action、Reducerの定義
--非同期処理はReducerに書かれるのでコチラ。
-configureStore.tsファイルの追加
--storeの設定
--reducerの構築
--reducerをHot Reloadingで構築
***boot [#y055ffb9]
-boot-client.tsxの追加~
bootに対応。
-boot-server.tsxの追加~
サーバーサイド・レンダリングという技術を~
利用するのために実装されているらしいが詳細不明。
**差分 [#jd5d23b0]
***package [#j44fb89b]
reduxと、redux-thunkの導入により、~
既存のWebAPI呼び出しの非同期処理を行う、~
isomorphic-fetchと、json-loaderが削除されている。
-追加
--redux
--redux-thunk
--react-redux
--react-router-redux
--node-noop
--history
--domain-task
-削除
--isomorphic-fetch
--json-loader
***仕様 [#ba15be6d]
-Redux化
setStateをconnect関数に変更。
setStateをconnect関数に変更~
(propsを使用してstateとfunctionを渡す)。
--Counter.tsx
--FetchData.tsx
-ページング処理の追加
--routes.tsx
--routes.tsx(URLにページ番号を組込む)
--FetchData.tsx
-サーバーサイド・レンダリング
--index.html
--boot-server.tsx
*詳細 [#z76579c4]
・・・
*参考 [#u55b478b]
**Qiita [#t2353ae5]
-ReduxのreducerもHot Reloadingさせる方法~
https://qiita.com/wadahiro/items/30f7f6a45af19f3ae9c1
**[[Visual Studio CodeによるSPA開発]] [#w343a81a]
**.NET 開発基盤部会 Wiki [#j1506b08]
-JavaScript~
https://dotnetdevelopmentinfrastructure.osscons.jp/index.php?JavaScript
--React~
https://dotnetdevelopmentinfrastructure.osscons.jp/index.php?React
--Redux~
https://dotnetdevelopmentinfrastructure.osscons.jp/index.php?Redux
----
Tags: [[:.NET開発]], [[:.NET Core]], [[:ASP.NET]], [[:ASP.NET Web API]], [[:ASP.NET SPA]]