progressive-web-app and react-redux

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;