状態管理

グローバルな状態管理は、アプリケーション全体で共有されるデータを効率的に管理する方法です。SolidJS では、アプリケーションの異なる部分間で状態を共有するために、createSignalやcreateStoreなどのリアクティブプリミティブと、ContextAPI を使用します。このセクションでは、SolidJS でのグローバルな状態管理の基本について、具体例を通じて学びます。

Context API の使用

Context API を使用することで、プロパティを手動で渡すことなく、コンポーネントツリーを通じてデータを効率的に共有できます。これは、テーマ、言語設定、認証情報などのグローバルなデータに特に有用です。

1. Context の作成と提供:
   まず、新しい Context を作成し、アプリケーションの他の部分で使用できるようにします。
   src/contexts/UserContext.jsを作成し、以下のコードを追加します。

   import { createContext, useContext } from 'solid-js';
   
   const UserContext = createContext();
   
   export function UserProvider(props) {
     const [user, setUser] = createStore({ name: 'John Doe', age: 30 });
   
     const store = {
       user,
       setUser,
     };
   
     return (
       <UserContext.Provider value={store}>
         {props.children}
       </UserContext.Provider>
     );
   }
   
   export function useUser() {
     return useContext(UserContext);
   }
   

   Copy to clipboard
   
   このコードは、ユーザー情報を格納するための Context を作成し、それを提供するUserProviderコンポーネントと、その Context を使用するカスタムフックuseUserを定義しています。
2. Provider でアプリケーションをラップする:
   アプリケーションのルートレベルでUserProviderを使用して、コンテキストを提供します。
   src/App.jsを開き、UserProviderでアプリケーションをラップします。

   import { UserProvider } from './contexts/UserContext';
   
   function App() {
     return <UserProvider>{/* アプリケーションのその他の部分 */}</UserProvider>;
   }
   
   export default App;
   

   Copy to clipboard

Context の使用

Context に保存されたデータは、コンポーネントツリー内の任意の場所で簡単にアクセスできます。

1. Context のデータを使用するコンポーネントの作成:
   src/components/UserProfile.jsを作成し、以下のコードを追加します。

   import { useUser } from '../contexts/UserContext';
   
   function UserProfile() {
     const { user, setUser } = useUser();
   
     const updateAge = () => {
       setUser('age', (prev) => prev + 1);
     };
   
     return (
       <div>
         <p>Name: {user.name}</p>
         <p>Age: {user.age}</p>
         <button onClick={updateAge}>Increment Age</button>
       </div>
     );
   }
   
   export default UserProfile;
   

   Copy to clipboard
   
   このコンポーネントは、useUserフックを使用してUserContextからユーザー情報にアクセスし、それを表示します。また、ボタンをクリックすることでユーザーの年齢を増加させる機能も提供します。