- 追加された行はこの色です。
- 削除された行はこの色です。
「[[マイクロソフト系技術情報 Wiki>http://techinfoofmicrosofttech.osscons.jp/]]」は、「[[Open棟梁Project>https://github.com/OpenTouryoProject/]]」,「[[OSSコンソーシアム .NET開発基盤部会>https://www.osscons.jp/dotNetDevelopmentInfrastructure/]]」によって運営されています。
-[[戻る>ASP.NET Core SPAテンプレート]]
--[[ASP.NET Core Angularテンプレート]]
--[[ASP.NET Core React.jsテンプレート]]
--ASP.NET Core React+Reduxテンプレート
* 目次 [#xccdc3f3]
#contents
*概要 [#b1d27879]
https://github.com/OpenTouryoProject/SampleProgram/tree/master/Template/SPATemplate/ReactReduxTemplate
%% https://github.com/OpenTouryoProject/SampleProgram/tree/master/Template/SPATemplate/ReactReduxTemplate %%
**構成 [#icfa4303]
※ [[JavaScript Services>ASP.NET Core SPAテンプレート#m46043c7]]も流行ってないので削除しました。~
IDEに標準のテンプレートとして表示されなくなっている(dotnet new コマンドには残っている)。
*構成 [#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
***追加 [#j3e6e9b7]
**スタック [#v524902f]
[[ASP.NET Core React.jsテンプレート]]に[[Redux>https://dotnetdevelopmentinfrastructure.osscons.jp/index.php?Redux]]が追加されている。
*詳細 [#u56fb043]
≒ [[ASP.NET Core React.jsテンプレート]]からの変更点
**追加 [#j3e6e9b7]
以下が追加されている。
├ store
| ├ Counter.ts
| ├ index.ts
| └ WeatherForecasts.ts
├ boot-client.tsx
├ boot-server.tsx
├ configureStore.ts
***変更 [#pacc68ae]
*詳細 [#z76579c4]
***store [#de379c3c]
TypeScriptなので、ReducerではなくBean的にStoreとして定義するらしい。~
(実際は、ココで、Reducer、Action、Storeが定義される)
-storeフォルダの追加
store
├ Counter.ts
├ index.ts
└ WeatherForecasts.ts
--1つのJSONではなく複数のBeanとして定義してある。
--Store、Action、Reducerの定義
--非同期処理はReducerに書かれるのでコチラ。
-configureStore.tsファイルの追加
--storeの設定
--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関数に変更~
(propsを使用してstateとfunctionを渡す)。
--Counter.tsx
--FetchData.tsx
-BrowserRouterを使用したページング処理の追加
--routes.tsx(URLにページ番号を組込む)
--FetchData.tsx
-サーバーサイド・レンダリング
--index.html
--boot-server.tsx
*参考 [#u55b478b]
**[[Visual Studio CodeによるSPA開発]] [#w343a81a]
**.NET 開発基盤部会 Wiki [#j1506b08]
**開発基盤部会 Wiki [#j1506b08]
***JavaScript > React / Redux [#d5214a5f]
-JavaScript~
https://dotnetdevelopmentinfrastructure.osscons.jp/index.php?JavaScript
--React~
https://dotnetdevelopmentinfrastructure.osscons.jp/index.php?React
--Redux~
https://dotnetdevelopmentinfrastructure.osscons.jp/index.php?Redux
***[[この処理を、create-react-appで作成し、掘り下げを行う。>https://dotnetdevelopmentinfrastructure.osscons.jp/index.php?React%E3%81%AE%E3%82%BB%E3%82%AB%E3%83%B3%E3%83%89%E3%83%BB%E3%82%B9%E3%83%86%E3%83%83%E3%83%97#s4a24c70]] [#ff21bf92]
----
Tags: [[:.NET開発]], [[:.NET Core]], [[:ASP.NET]], [[:ASP.NET Web API]], [[:ASP.NET SPA]]
Tags: [[:.NET開発]], [[:.NET Core]], [[:ASP.NET]], [[:ASP.NET Web API]], [[:ASP.NET SPA]], [[:JavaScript]]