skiss: Next.js 状態管理:Zustandを試してみる

skissについて

©skiss 1997 - 2024

タイトル : Next.js 状態管理:Zustandを試してみる

更新日 : 2024-01-28

カテゴリ : プログラミング

タグ :

frontend

nextjs

material-ui

zustand

Zustandを試してみます

やってみたことは、以下です。

メニュー1の画面で選択した内容をメニュー2で選択した画面に出すだけです。

メニュー1の画面で選択

メニュー2の画面にメニュー1で選択した画面を出す

お世話になったページ(参照したページ)

やったこと

まずはインストールです。

$ npm install zustand

src/ の下に store/ を作って、src/store/project.ts を作成します。

import { create } from "zustand";

type ProjectStore = {
    project: string;
    setProject: (name: string) => void;
};

export const useProjectStore = create<ProjectStore>((set) => ({
    project: "next", // 初期値の入れ方は、createStoreを使うのかな? これは保留で
    setProject: (name) => set((state) => ({project: name})),
}));

メニュー画面1の対応

import {useProjectStore} from "@/store/project";
const {project, setProject} = useProjectStore()
setProjectを使って値を更新

"use client"

import { Typography, Stack } from "@mui/material";
import Radio from '@mui/material/Radio';
import RadioGroup from '@mui/material/RadioGroup';
import FormControlLabel from '@mui/material/FormControlLabel';
import FormControl from '@mui/material/FormControl';
import FormLabel from '@mui/material/FormLabel';

import {useProjectStore} from "@/store/project"; 

export default function Home() {

  const {project, setProject} = useProjectStore()

  return (
    <Stack padding={3} spacing={3}>
      <Typography color={"secondary"}>メニュー1の画面</Typography>

      <Stack>
      <FormControl>
        <FormLabel id="demo-radio-buttons-group-label">Project</FormLabel>
        <RadioGroup
          aria-labelledby="demo-radio-buttons-group-label"
          name="radio-buttons-group"
          onChange={(event) => setProject(event.target.value)}
        >
          <FormControlLabel value="next" checked={project == "next"} control={<Radio />} label="next" />
          <FormControlLabel value="nuxt" checked={project == "nuxt"} control={<Radio />} label="nuxt" />
          <FormControlLabel value="svelete-kit" checked={project == "svelete-kit"}  control={<Radio />} label="svelete-kit" />
        </RadioGroup>
      </FormControl>
      </Stack>

      <Typography color={"secondary"}>project : {project} を選択中です</Typography>
    </Stack>
  );
}

メニュー画面2の対応

import {useProjectStore} from "@/store/project";
const {project} = useProjectStore() して、projectを使う

"use client"

import { Typography, Stack, Button } from "@mui/material";

import {useProjectStore} from "@/store/project"; 

export default function Home() {

  const {project} = useProjectStore()

  return (
    <Stack padding={3} spacing={2}>
      <Typography>メニュー2の画面</Typography>

      <Typography>メニュー1の画面でprojectは {project} が選択中です</Typography>
    </Stack>

  );
}