ここでは、おなじみのカウンター（１ずつ増える機能のみ）を、わざわざ生のreduxを使って作ろうという試みです。
［今は、Reactでは、reduxは非推奨になっており、redux-toolkitが推奨になっているのに、わざわざという面はあるでしょうが、本質を学ぶためにはやはり必要ということでやっていきます］
まずは、通常の作り方をみていきます。（未掲載）
ボタンを押すと、ボタンのonPressプロパティ定義されている関数が実行されるようになっています。この場合は、ほかのコンポーネントのボタンも全くおなじ動作をさせる場合、これは、あくまで、ボタンという部品に依存した処理なので、それぞれのコンポーネント内でいちいち同じ記述をしないといけないことになります。
コンポーネント数が少なければ関係ないですが、多くなればなるほど、同じ処理をする場合が増えてくるのではないでしょうか？
さて、本題です。
⓪ 表示画面の作成です。
① Action と ActionCreator関数を作成します。
一つのファイルで作成してみます。
（プロジェクト名）/ redux /actions/ index.js
② Reducerの作成
Reducerの役割は、以下の３つです。
a. 唯一、stateを変更できる
b. stateの変更内容をあらかじめ場合分けしておける
c. Javaでいうところのリスナーの機能を有する（JavaでいうActionEventが、JavaScriptのActionにあたります）
③ mapStateToProps、mapDispatchToPropsの定義と、App.jsとの接続
なお、通常はContainerという役割をつとめるコンポーネントを作成して、redux関連処理はそちらに任せ、App.jsは表示に専念させるが通例ですが、ここでは、説明上わかりやすくするために、App.jsに両方の役割をさせます。
このような感じでやろうとおもってやっていたのですが、2023／10／1現在、connect関数が効かないようになっているので、おとなしくredux-toolkitへ移行します。
redux-toolkitを通しで初めてするなら、このYoutube動画です。
【Redux入門】初学者でも理解できるReduxの仕組みを解説します！(Redux Toolkitを使用) - YouTube
