ASP.NET Core React+Reduxテンプレートのバックアップソース(No.7)

「[[マイクロソフト系技術情報 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]
-storeフォルダの追加
 store
  ├ Counter.ts
  ├ index.ts
  └ WeatherForecasts.ts
--1つのJSONではなく複数のBeanとして定義してある。
--Store、Action、Reducerの定義
（非同期処理は、Reducerに書かれるのでコチラ）

-configureStore.tsファイルの追加
--storeの設定
--reducerの構築

***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関数に変更。
--Counter.tsx
--FetchData.tsx

-ページング処理の追加
--routes.tsx
--FetchData.tsx

-サーバーサイド・レンダリング
--index.html
--boot-server.tsx

*詳細 [#z76579c4]

*参考 [#u55b478b]

**[[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]]
ASP.NET Core React+Reduxテンプレート のバックアップソース(No.7)

ASP.NET Core React+Reduxテンプレートのバックアップソース(No.7)
