Reduxあるいは似たものを学ぶ③

プロジェクトに、Zustandを詰め込んで、useStoreを使う。

下記をすごく参考にしました。

[JavaScript] Reactの状態管理にはZustandが決定解になるような気がする (zenn.dev)

 

 

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
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

import {create} from 'zustand';

const useStore = create*1

export default useStore;

 

counterstoreで、少し複雑に書くと、Counter.jsでsetStateとかなり類似した記載ができます。

*1:set) =>({

    count: undefined,
    setCount: (value) => {
        set((state) =>{
            return { count:value};
        })
    }
}