ASP.NET Core React+Reduxテンプレート

「マイクロソフト系技術情報 Wiki」は、「Open棟梁Project」,「OSSコンソーシアム .NET開発基盤部会」によって運営されています。

• 戻る

目次 †

概要 †

https://github.com/OpenTouryoProject/SampleProgram/tree/master/Template/SPATemplate/ReactReduxTemplate

構成 †

フォルダ †

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

スタック †

ASP.NET Core React.jsテンプレートにReduxが追加されている。

変更点 †

追加 †

以下が追加されている。

├ store
｜  ├ Counter.ts
｜  ├ index.ts
｜  └ WeatherForecasts.ts
├ boot-client.tsx
├ boot-server.tsx
├ configureStore.ts

store †

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 †

• boot-client.tsxの追加
  bootに対応。

• boot-server.tsxの追加
  サーバーサイド・レンダリングという技術を
  利用するのために実装されているらしいが詳細不明。

差分 †

package †

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

仕様 †

• Redux化 setStateをconnect関数に変更
  （propsを使用してstateとfunctionを渡す）。
  • Counter.tsx
  • FetchData?.tsx

• BrowserRouter?を使用したページング処理の追加
  • routes.tsx（URLにページ番号を組込む）
  • FetchData?.tsx

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

詳細 †

参考 †

Visual Studio CodeによるSPA開発 †

.NET 開発基盤部会 Wiki †

JavaScript > React / Redux †

• 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で作成し、掘り下げを行う。 †

Tags: :.NET開発, :.NET Core, :ASP.NET, :ASP.NET Web API, :ASP.NET SPA