[Zustand]超単純グローバルステータス管理!(ft.Typescript)

6056 ワード
zustand TIL テキストリンク

reactを用いたWeb開発では,状態管理が重要である.Redux、Recoilを使用し、開発者としてスタートした会社では、出勤前にコンセプトをつかむためにZustandを使用しています.
方法はRecoilに似ています.最大の違いは、rootComponentを特定のコンポーネントにカプセル化する必要がないことです(たとえば、recoilを使用する場合は、<RecoilRoot></RecoilRoot>パッケージ<App/>コンポーネントを使用してグローバルステータスを管理する必要があります).また、Storeの作成はもっと簡単なようです.

ストレージの作成

//store의 이름은 store.ts로 생성했다.

import create from 'zustand';

interface SelectContentState { //ts를 사용하기때문에 타입지정이 필요.js사용시 미사용 코드
  selectContent: number;
  setSelectContent: (select: number) => void;
}

// create를 이용해서 store을 생상헐 수 있으며, 다수의 store도 생성 가능하다.
export const useStore = create<SelectContentState>((set) => ({
  // create 함수의 매개변수로 콜백함수를 받는데 이 콜백함수의  return객체에 state,
  // setState를 넣는다.
  selectContent: window.localStorage.getItem('select') ? 
  	Number(window.localStorage.getItem('select')) : 0,
  setSelectContent: (select) => {
    set((state) => ({ ...state, selectContent: select }));
  },
}));

使用状態

//사용하고자 하는 컴포넌트에서 사용할 store를 가져온다.
import { useStore } from '../store';

const NavBar = () => {
  //구조분해할당을 통해 state, setState를 가저와서 사용하면된다. 너무 간단하다.
  const { selectContent, setSelectContent } = useStore();
  
 return ... 
}

export default NavBar;
簡単ですが、zustantを使用するグローバルステータスを理解し、create関数は追加のオプション変数を受け入れることができます.ゆっくり勉強しましょう.
OFTest(三):干渉メッセージの排除方法
Mondrian 4テストの簡単なdemo(Saiku簡単なテストSchemaファイル)