「[[マイクロソフト系技術情報 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に書かれるのでコチラ。

-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

*詳細 [#z76579c4]

*参考 [#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]], [[:JavaScript]]

トップ   編集 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS