> For the complete documentation index, see [llms.txt](https://tech.x2bee.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tech.x2bee.com/dev-guide/developer-guide-en/pjt-prepare/publish-your-docs/store-front-framework-next.js/05.-state-management/2.-x2beestore.md).

# 2. x2beeStore

This document explains how to use x2beeStore to manage state in a Next.js project.

The first step creates a file and defines the state, and the second step explains how to save and retrieve the defined state.

Using Zustand is very simple, but x2beeStore is provided to reduce repetitive code when creating state.

## How to Use x2beeStore

{% stepper %}
{% step %}

### Creating the File and Defining State

The code below is an example of creating a `testStore.ts` file and managing state using x2beeStore.

{% code title="testStore.ts" %}

```
```

{% endcode %}

```typescript
import x2beeStore from '@/lib/common/plugins/x2beeStore';

export const testState = {
  test1: '',
  test2: '',
  test3: '',
};

const useTestStore = x2beeStore('testStore', testState);

export default useTestStore;
```

As shown in the code above, import `x2beeStore` and define an object like `testState`.\
Then use the `x2beeStore` function to create a state store, using the `testState` object as the initial state, and assign it to the `useTestStore` variable.
{% endstep %}

{% step %}

### Example of Saving and Retrieving State

The following is an example component that saves and retrieves the `testStore` state.

{% code title="TestPage.tsx" %}

```
```

{% endcode %}

```tsx
'use client';

import useTestStore from '@/lib/common/stores/testStore';

const TestPage = () => {
  function setStore() {
    useTestStore.setState({
      test1: '11111',
      test2: '22222',
      test3: '3333'
    });
  }

  function getStore() {
    const store = useTestStore.getState();
    console.log(store);
  }

  return (
    <>
      test2222
      <button onClick={() => setStore()}>상태 저장</button>
      <button onClick={() => getStore()}>상태 조회</button>
    </>
  );
};

export default TestPage;
```

This retrieves the state store created in the `testStore.ts` file under the name `useTestStore`.\
Based on the `setStore` and `getStore` function examples, you can save and retrieve state.
{% endstep %}
{% endstepper %}

{% hint style="info" %}

* This guide explains a simple way to use x2beeStore (which uses Zustand internally).
* In an actual project, additionally consider things like type definitions, partial updates, and applying middleware (e.g., persist).
  {% endhint %}