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

この処理を、create-react-appで作成し、掘り下げを行う。


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


トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2018-06-28 (木) 09:35:49 (146d)