https://eh-career.com/engineerhub/entry/2019/10/24/103000
PWAの作り方をサクッと学ぶ - 「ホーム画面に追加」「キャッシュ操作」「プッシュ通知」の実装
but -universal-project angular-pwa not required
https://dev.classmethod.jp/articles/angular8-pwa/ :: ok
----------------------------------------------------------------------------------------------------------
index.js and app.js at tuyano textbook
import React from 'react';
import ReactDOM from 'react-dom';
import { createStore} from 'redux';
import { Provider } from 'react-redux';
import './index.css';
import App from './App';
// ステートの値
let state_value = {
counter:0,
message:"COUNTER"
}
// レデューサー
function counter(state = state_value, action) {
switch (action.type) {
case 'INCREMENT':
return {
counter:state.counter + 1,
message:"INCREMENT"
};
case 'DECREMENT':
return {
counter:state.counter - 1,
message:"DECREMENT"
};
default:
return state;
}
}
// ストアを作成
let store = createStore(counter);
// 表示をレンダリング
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
import React, { Component } from 'react';
import { connect } from 'react-redux';
import './App.css';
// ステートのマッピング
//function mappingState(state) {
// return state;
//}
// Appコンポーネント
class App extends Component { // 3 lines belo are unnncessary
//constructor(props){
// super(props);
// }
render() {
return (
<div>
<h1>R edux example with 2 component :: Message and Button </h1>
<Message />
<Button />
</div>
);
}
}
// ストアのコネクト
//App = connect()(App); // unnecessary
// メッセージ表示のコンポーネント
class Message extends Component {
style = {
fontSize:"20pt",
padding:"20px 5px"
}
// this.props is store provided by Provider Tag in index.js
render(){
return (
<p style={this.style}>
{this.props.message}: {this.props.counter}
</p>
);
}
}
// ストアのコネクト
//Message = connect(mappingState)(Message);
Message = connect( (state) => state )(Message);
//
class Button extends Component {
style = {
fontSize:"16pt",
padding:"5px 10px"
}
constructor(){
super();
this.doAction = this.doAction.bind(this);
}
// ボタンクリックでディスパッチを実行
doAction(e){
if (e.shiftKey){
this.props.dispatch({ type:'DECREMENT' }); // passed to reducer named counter in index.js
} else {
this.props.dispatch({ type:'INCREMENT' });
}
}
render(){
return (
<button style={this.style}
onClick={this.doAction}>
click
</button>
);
}
}
// ストアのコネクト
Button = connect()(Button);
export default App;
