プロジェクトに、Zustandを詰め込んで、useStoreを使う。
下記をすごく参考にしました。
[JavaScript] Reactの状態管理にはZustandが決定解になるような気がする (zenn.dev)
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import Counter from './Counter';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Counter />
</React.StrictMode>
);
// If you want to start measuring performance in your Counter, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
Counter.js
import useStore from './counterstore';
const Counter = () =>{
const countDefault =1;
const {count = countDefault,setCount} = useStore();
const increaseCount = ()=>{
setCount(count+1);
}
const decreaseCount = ()=>{
setCount(count-1);
}
return(
<div>
<h1>count:{count}</h1>
<button onClick={increaseCount}>Increase</button>
<button onClick={decreaseCount}>Decrease</button>
</div>
)
}
export default Counter;
counterstore.js
counterstoreで、少し複雑に書くと、Counter.jsでsetStateとかなり類似した記載ができます。
*1:set) =>({
count: undefined,
set((state) =>{
})
}
}