「[[マイクロソフト系技術情報 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 %%

※ [[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

**スタック [#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

***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]
-JavaScript - .NET 開発基盤部会 Wiki~

**[[Visual Studio CodeによるSPA開発]] [#w343a81a]

**開発基盤部会 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]]
トップ   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS