React+zustand

ブログBlog

- React+zustand
- 2023年10月3日
- react.js

最近React + zustandの環境での開発の機会があったので、所感を記事にしてみました。

zustandは状態管理用のライブラリです。公式GitHubページはこちら。

https://github.com/pmndrs/zustand

どんな人向けか

Hooksを使わない、ReduxやFluxを使って開発していたプロジェクトの移行先としては、導入コストが低そうです。

PostalCode取得のサンプル

viteを使用してReactの動作確認用プロジェクトの作成、開発用サーバを起動しておきます。

npm create vite@latest react -- --template react
cd react
npm install
npm run dev

今回はzustandを使用するので、zustandも追加します。

npm install zustand

簡単にzipcloudのAPIで郵便番号を検索するStoreを作成してみます。

stores/AddressStore.jsに下記のような検索用のActionと結果保存先のaddressesを作成します。

import { create } from "zustand";

export const useAddressStore = create(set => ({
  // storeに保持するデータ
  addresses: [],
  // action
  getAddresses: async (zipCode) => {
    const result = await fetch(`https://zipcloud.ibsnet.co.jp/api/search?zipcode=${zipCode}`)
    const json = await result.json()
    set({
      addresses: json?.results?.map(
        result => `${result.zipcode}：${result.address1}${result.address2}${result.address3}`
      ) || []
    })
  }
}))

actionやstoreの情報が1ファイルにまとまっており、記述量は減らせます。ただし、

ひとつのActionで複数のStoreを更新
複数のstoreの中身を混ぜて、値を取得

のような事は、少し手を加えないとできません。このような用途で使用する頻度が低ければ、十分な機能だと思われます。

App.jsxに下記のように、storeを使用した郵便番号検索を追加します。

import { useCallback, useState } from 'react'
import './App.css'
import {useAddressStore} from './stores/AddressStore'

function App() {
  const [postCode, setPostCode] = useState('100-0001')
  const {addresses, getAddresses} = useAddressStore(store => ({...store}))
  const handleOnChange = useCallback(e => setPostCode(e.target.value), [setPostCode])
  const handleOnClick = useCallback(() => getAddresses(postCode), [getAddresses, postCode])

  return (
    <>
      <h1>Vite + React</h1>
      <div className="card">
        {
          addresses.map(address => (<label key={address}>{address}</label>))
        }
      </div>
      <div className="card">
        <input type="text" onChange={handleOnChange} defaultValue={postCode} />
        <button onClick={handleOnClick}>検索</button>
      </div>
    </>
  )
}

export default App

これで、郵便番号を入力して検索ボタンを押すと、住所が表示されるようになりました。

総評

Fluxからの移行先としては、悪くない選択肢に思います。

Hooksに慣れた環境なら、jotai、recoilの方が馴染みやすいかもしれません。

この記事を書いた人 : 井上貴博

その他のスタッフブログ:

一覧へ戻る

どんな人向けか

PostalCode取得のサンプル

総評

JOIN OUR TEAM