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