zustandの恩恵を享受する②

分かりやすくするために、zustand関連ホームページで最も一般的な記載で作成するものとする。

［プロジェクト］/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 SubApp from './SubApp';

import UnderApp from './UnderApp';

import useStore from './store';

function App() {

  const {count, value} = useStore();

  const totalCount = count + value;

  return (

    <div>

      <p>総数：{totalCount}</p>

      <SubApp/>

      <UnderApp/>

    </div>

  );

}

export default App;

［プロジェクト］/src/SubApp.js

import useStore from './store';

export default function SubApp() {

    const {count, increaseCount,decreaseCount} = useStore();

    return(

        <div>

                <p>軽自動車</p>

                <p>カウント：{count}</p>

                <button onClick={increaseCount}>+</button>

                <button onClick={decreaseCount}>-</button>

        </div>

    )

}

［プロジェクト］/src/UnderApp.js

import useStore from './store';

export default function SubApp() {

    const {value,increaseValue,decreaseValue} = useStore();

    return(

        <div>

                <p>普通自動車</p>

                <p>カウント：{value}</p>

                <button onClick={increaseValue}>+</button>

                <button onClick={decreaseValue}>-</button>

        </div>

    )

}

［プロジェクト］/src/store.js