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

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

戻る

目次 †

目次
概要
構成
- フォルダ
- スタック
変更点
- 追加
  - store
  - boot
- 差分
  - package
  - 仕様
詳細
参考
- Visual Studio CodeによるSPA開発
- .NET 開発基盤部会 Wiki
  - JavaScript > React / Redux
  - この処理を、create-react-appで作成し、掘り下げを行う。

↑

概要 †

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に書かれるのでコチラ。