前出の車の種類ごとのカウンターをzustandを使って作成したいと思い立ちました。
その前に準備です。
カウンターのプラスボタンのみのアプリケーションを作成してみます。
［プロジェクト名］/src/App.js
import useStore from './store';
function App() {
const {count, increaseCount} =useStore();
return (
<div>
<p>{count}</p>
<button type="button"
onClick={increaseCount}>+</button>
</div>
);
}
export default 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/store.js
import {create} from 'zustand';
const useStore = create*1
}));
export default useStore;
［このはてなブログでは、どうしてもcreateのあとが長すぎて表示されません。］
const useStore = create*2
}));
データの保守性の議論はここでは割愛します。
これだけでできるはずです。
解説ですが、store.js内が理解できる必要があります。
create関数でuseStoreを参照したときの処理が書かれています。
create関数の引数は、『setという関数を渡すと、プロパティにstate名を持ち初期値を定義された要素と、stateを変更する式を引数にもつset関数とそのプロパティ名をもつ要素からなるオブジェクトリテラルを返してくる関数』である。わかりにくいですね。
ここで、setStateに寄せた記載方法があるので紹介します。
［プロジェクト名］/src/index.js→そのまま
［プロジェクト名］/src/App.js
import useStore from './store';
function App() {
const {count, setCount} =useStore();
const changeCount = () =>{
setCount(count + 1);
}
return (
<div>
<p>{count}</p>
<button type="button"
onClick={changeCount}>+</button>
</div>
);
}
export default App;
［プロジェクト名］/src/store.js
import {create} from 'zustand';
const useStore = create*3
}));
export default useStore;
［はてなブログでは、create以降がうまく表示されません］
const useStore = create*4
}));
また、storeの中のstateを取り出す際に下記のように記載することもあります（ここでは、setCountを取り出す書き方を変えてます。）
import useStore from './store';
function App() {
const {count} =useStore();
const setCount = useStore((state) => state.setCount);
const changeCount = () =>{
setCount(count + 1);
}
return (
<div>
<p>{count}</p>
<button type="button"
onClick={changeCount}>+</button>
</div>
);
}
export default App;
よく考えると、zustandでは、関数の受け渡しをコンポーネント間でしなくてよい設計になってます。すごいですね。あとできないことは非同期処理（API通信など）だけでしょうか。⇒ただし、これもpersistミドルウェアを使用することでaxiosを使用しながら簡単にできそうです。
参考：下記HPの 14:45あたり ～
www.youtube.com
長くなったのでここで終了。
count: 0,
increaseCount: () =>set((state) =>
({count: state.count + 1}
count: 0,
increaseCount: () =>set((state) =>
({count: state.count + 1}
count: 0,
setCount: (value) => set((state) =>
count: 0,
setCount: (value) => set((state) =>
