React Redux基礎の基礎/小さなカウンターアプリを作る流れ

この記事で書くこと

UdemyのReact、Redux講座の基礎編を学んでおり、本当にReduxがややこしいので一旦基礎の基礎をまとめました。
環境構築のあたりや細かい用語の説明や調査は省き、ミニマムにコードの流れをまとめただけの記事です。
ほぼ頭の整理のためなのでいろいろ認識違ってるかもしれないです。。w。

最低限わかっておくべきprops、stateについてはこちらが分かりやすかったです。
+と-ボタンで数字が増える、減るというだけの処理を書いてます。

流れ

【1】まず、アクションのタイプを書く。incrementかdecrementか。これをReducerへ渡す。

action/index.js

//あとでレデューサーでも使うので、constしておく。
export const INCREMENT = 'INCREMENT'
export const DECREMENT = 'DECREMENT'

//それぞれをアクションクリエイターとよぶよ
export const increment = () => ({
        type:INCREMENT
})

export const decrement = () => ({
        type:DECREMENT
})

【2】アクションからReducerへINCREMENT、DECREMENTを渡し、typeによりstateを返す。

reducers/count.js

import { INCREMENT,DECREMENT } from '../actions'

//初期状態のオブジェクトを入れる変数名をinitialStateとする。
const initialState = { value:0 }//初期のカウント

//関数として定義。引数はstate、acitonとして２つ持つ
export default(state =initialState, action) => {
    //actionのtype（INCREMENTかDECREMENTか）はaction.typeという処理で拾える
    switch(action.type){
        case INCREMENT://INCREMENTを拾った場合は値をプラス1する。
            return { value:state.value + 1}
        case DECREMENT://同様に、DECREMENTの場合はマイナス。
            return { value:state.value - 1}
        default: //初期状態は0のまま
            return state
    }
}

【3】count.jsを同じReducerの中のindex.jsに渡し、combineReducersでまとめる（今回は1つだが、複数のreducersをまとめるのに良い）

reducers/index.js

//すべてのreducsersをここでまとめてしまうcombineReducers を取り込む。
import { combineReducers } from 'redux'
//count.jsから取得
import count from './count'

//storeで使うので、Reducerで決めた数値をエクスポートする。
export default combineReducers({ count })
//なお、今回は受け渡す値は「count」一つだが
//いろいろな状態を管理したい場合は
//export default combineReducers({ foo,bar,baz }) みたいな感じ

【4】ReducserからComponent/App.jsへ。ここでconnect関数を使い、

component/App.js

import React, { Component } from 'react';
//コネクト関数を追加
import { connect } from 'react-redux'
import { increment, decrement } from '../actions'


class App extends Component {
  //counterには、レデューサーのカウンター内のオブジェクトの値の値を渡す。propsで受け取ってる。
  render(){
    const props = this.props
      return(
      <React.Fragment>
        <div>counter:{props.value}</div>
        <button onClick={props.increment}> +1</button>
        <button onClick={props.decrement}> -1</button>
      </React.Fragment>
    )
  }
}

//mapStateToPropsは、stateの情報から、componentに必要な情報を受け渡す
const mapStateToProps = state => ({ value:state.count.value})
//アクションが実行された時に、該当のアクションを渡し、状態遷移をさせるのがディスパッチ
const mapDispatchToProps = dispatch => ({
  increment: () => dispatch(increment()),
  decrement: () => dispatch(decrement())
})
//connect関数でstoreと描写側がつながるらしい。
export default connect(mapStateToProps,mapDispatchToProps)(App)

【5】これらをまとめるトップにあるファイルがこれ。

index.js

import React from "react";
import ReactDOM from 'react-dom';
//createStoreはstoreを利用するためのもの
import { createStore } from 'redux'
//Providerはすべての環境でstoreを使うためのもの
import { Provider } from 'react-redux'
import './index.css';
import reducer from './reducers';
import App from './components/App';
import registerServiceWorker from './registerServiceWorker';

//ここで作られるstoreはアプリ内の唯一のものになる
const store = createStore(reducer)

//既存のコンポーネントを、providerコンポートネントで囲み、store属性に、
//上のconstしたstoreを当てはめる。これで、バケツリレーをせずにproviderが使える
//この中の<App />が【4】でrenderされてるもの。
ReactDOM.render(
<Provider store={store}>
    <App />
</Provider>,
 document.getElementById('root')
);

registerServiceWorker();//?

実際の表示。※【4】でrenderされてるコンテンツのみ！

+1と-1をクリックすると数字が増えるよ。

むずい

書き始めたときは流れに沿って書けば整理できそう！と思ったけど、まとめてみると全然1つの流れ、というわけではない。し、あまりよくわかってないです。。w

とにかく、
action、action creatorでアクションを作り
ビュー側のクリックとかでそのアクションをディスパッチする。
レデューサーでそのアクションを元に実際にstate（値）を変える。
したらビュー側が変わる、というくらいは分かりました！ほんまにわかってるんかこれ！

qiitaでも色々あったので、もう少し整理するためにいろんな記事読んでみようと思います。。
外部サイトですがこれも図になってて分かりやすかった。

ちなみに

これやってます！まだ基礎編を学んだだけなのでこっからしんどそう！
「フロントエンドエンジニアのためのReact・Redux実践入門」
https://www.udemy.com/course/react-application-development/learn/
ちなみに、gitもpushとclone、commitくらいしかしてなかった（しかもSource tree）のでめっちゃ練習になってます、、、w