『React.js&Next.js 超入門』Chapter4-1 Reduxを使ってみよう 覚書

『React.js&Next.js 超入門』P.190~209

React.js & Next.js超入門 | 掌田津耶乃 | 工学 | Kindleストア | Amazon

Reduxは思ってたよりも複雑だったので、頭の中を整理するために記事を書きました。

Reduxの重要な要素　※自分なりの解釈です。

ストア(store)

　データの保管庫。Reduxの中で最も重要な要素なのに、スクリプトの最後の方にならないと出てこない。

ステート(state)

　ストアに保管される値のこと。初期値を設定した後はレデューサーの働きによっていろいろ変えられる。スクリプトでは一番最初に定義される。

レデューサー(reducer)

　ストアが周りから影響を受けた時に、ケースに応じてステートの内容を書き換えるもの。

プロバイダー(provider)

　Providerタグで囲んだコンポーネントで、ストアの内容が適用されるようにするもの。
Providerタグの内部にある全てのコンポーネントにおいて、this.props.〇〇の値はstateのプロパティを指すようになる。
　

スクリプトの書き方

①reduxフォルダのsrcフォルダから「createStore.js」ファイルと「combineReducers」ファイルをインポートする。

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, combineReducers } from 'redux';

②react-reduxフォルダのsrcフォルダにあるcomponentsフォルダから「Provider.js」ファイルをインポートする。

import {Provider} from 'react-redux';
import './index.css';
import App from './App';

③ストアに保管する値（ステート）を定義する。

let state_value = {
  counter:0,
  message:"COUNTER"
}

ここで設定した「state_value」という変数は②で定義するリデューサーの引数として使われる。

④ストアが周りから影響を受けた際にステートの値を書き換えるリデューサーを定義する。

function counter(state = state_value, actuion){
  switch(action.type){
     case 'INCREMENT';
     return {
       counter: state.counter + 1,
       message: "INCREMENT"
     };
     case 'DECREMENT';
     return {
       counter: state.counter - 1,
       message: 'DECREMENT"
     };
}

ここで設定した「counter」というファンクションは③で定義するストアの引数として使われる。

⑤ストアを作成する。

let store = createStore(counter);

ここで設定した「store」は④のプロバイダーの属性として指定される。

⑥JSXタグの中でProviderタグを記述する。

ReactDOM.render(
  <Provider store = {store}>
    <App />
  </Provider>,
  document.getElementById('root)
);

③から⑥まで、それぞれの段階で作られた変数をわらしべ長者みたいに次のステップの引数やら属性として渡しています。
storeの作成が結構最後の方にあるのも、store自身が、Reduxの全ての要素を格納するコンポーネントということが関係しているのかもしれません。