まず、ReduxやRedux toolkitの恩恵を感じるために例を作成します。
完成形がこれです。
よく車の台数をカウントしている光景を見かけますが、車種別にカウントできるようにしました。
具体的には、それぞれの車種別にカウンターがあり、その総数が一番上にカウントされるものです。
図はわかりやすいように、CSSファイルを入れてますが、今後はCSSファイル抜きで説明したいと思います。
create-react-appを使用します。
src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
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}
/>
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;