zustandの恩恵を享受するための準備

まず、ReduxやRedux toolkitの恩恵を感じるために例を作成します。

完成形がこれです。

 

よく車の台数をカウントしている光景を見かけますが、車種別にカウントできるようにしました。

具体的には、それぞれの車種別にカウンターがあり、その総数が一番上にカウントされるものです。

 

図はわかりやすいように、CSSファイルを入れてますが、今後はCSSファイル抜きで説明したいと思います。

 

create-react-appを使用します。

 

src/index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  //<React.StrictMode>
    <App />
  //</React.StrictMode>
);

src/App.js

import './components/SubCounter';
import SubCounter from './components/SubCounter';
import {useState} from 'react';

function App() {
  const [counter,setCounter] = useState(0);


  const increment = () =>{
    setCounter((counter) => counter + 1 );
   
  }

  return (
    <div>
      <p>総数:{counter}</p>
      <SubCounter type="軽自動車"
                  inc = {increment}
      />
      <SubCounter type="SUV"
                  inc = {increment}
      />
      <SubCounter type="普通車"
                  inc = {increment}
      />
      <SubCounter type="トラック"
                  inc = {increment}
      />    
    </div>
  );
}

export default App;

src/components/SubCounter.js

import {useState} from 'react';

function SubCounter(props){

    const [sub_counter,setSubCounter] = useState(0);

    const increment = () =>{
        props.inc();
        setSubCounter((sub_counter) => sub_counter + 1);
    }

    return(
        <div>
            <p>{sub_counter}</p>
            <p>車種名:{props.type}</p>
            <p>カウント:{props.count}</p>
            <button type="button"
                    onClick={increment}>+</button>
            <button type="button">-</button>
        </div>
    )
}

export default SubCounter;