React+reduxで数字をカウントしてみる

index.jsを用意します

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import { persistStore, persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage'
import { PersistGate } from 'redux-persist/integration/react'
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"
        };
        case 'RESET':
        return {
            counter:0,
            message:"RESET"
        };
        default:
        return state;
    }
}


// Redux Persistの設定
const persistConfig = {
    key: 'root',
    storage,
}


// パーシストレデューサーの作成
const persistedReducer = persistReducer(persistConfig, counter)


// ストア、パーシスターの作成
let store = createStore(persistedReducer)
let pstore = persistStore(store)


// 表示をレンダリング
ReactDOM.render(
    <Provider store={store}>
        <PersistGate loading={<p>loading...</p>}
                persistor={pstore}>
            <App />
        </PersistGate>
    </Provider>,
    document.getElementById('root')
);

ここではパーシストレデューサーをもとに、ストアとパーシスターを作成しました。
次にパーシスターとAPPコンポーネントをJSXで表示します。

APP.jsを作成

import React, { Component } from 'react';
import { connect } from 'react-redux';
import './App.css';


// Appコンポーネント
class App extends Component {


  constructor(props){
    super(props);
  }

  render() {
    return (
      <div>
        <h1>Redux</h1>
        <Message />
        <Button />
      </div>
    );
  }
}
// ストアのコネクト
App = connect()(App);


// メッセージ表示のコンポーネント
class Message extends Component {
  style = {
    fontSize:"20pt",
    padding:"20px 5px"
  }

  render(){
    return (
      <p style={this.style}>
        {this.props.message}: {this.props.counter}
      </p>
    );
  }
}
// ストアのコネクト
Message = connect((state)=>state)(Message);


// ボタンのコンポーネント
class Button extends Component {
  style = {
    fontSize:"16pt",
    padding:"5px 10px"
  }

  constructor(props){
    super(props);
    this.doAction = this.doAction.bind(this);
  }

  // ボタンクリックでディスパッチを実行
  doAction(e){
    if (e.shiftKey){
      this.props.dispatch({ type:'DECREMENT' });
    } else if (e.ctrlKey){
      this.props.dispatch({ type:'RESET' });
    } else {
      this.props.dispatch({ type:'INCREMENT' });
    }
  }


  render(){
    return (
      <button style={this.style}
          onClick={this.doAction}>
        click
      </button>
    );
  }
}
// ストアのコネクト
Button = connect()(Button);


export default App;

APP.js内に画面に表示するMessageコンポーネントとプッシュボタンのButtonコンポーネントを作成します。
Buttonコンポーネント内には、ボタンを押すINCREMENT、Shiftキー押しながらボタンを押すとDECREMENT、ctrlキーを押しながらボタンを押すとRESETのタイプを作りました。ボタンを押すとタイプごとのアクションをRedux送りそのタイプにあった処理が行われます。

読んでくださりありがとうございます。
初学者なので至らないところがあると思います。
おかしい所があればご指摘願います。