test-zustify v1.0.0

create you store via createSharedStore

const [useStore, useDispatch] = createSharedStore (state, reducer, routes)

It will return an array with two values

useStore

const count = useStore(state=>state.count)

useDispatch

It will provide you functions to update or reset the state

const {dispatch,reset,actions}  = useDispatch()

Here's the Markdown version of the provided text:

## Common Use cases
Any State which has significance across the app (e.g., UserProfile, AuthTokens, Theme, etc.) or will be used only with specific Routes will come under Shared State.

## How to use it
We can use Shared State if we want our state to be accessible on any part of our app.

For this, we have exposed a wrapper named `createSharedStore`. Here's an example:

```javascript
// Create a store called MyComponent.store.ts in src/store

import { createSharedStore } from 'src/wrappers/store/createSharedStore';
import { Store } from 'src/wrappers/store/store.interface';

// First parameter is your state, second parameter is reducer,
// third parameter is either an array of routes
// where you want your state to be accessible or
// an enum ALLOWED_ALL which says store can be accessed anywhere

export const countStore = createSharedStore(
  // This is your state
  {
    count: 0,
    firstName: 'deepanshu',
    lastName: 'shukla',
  },
  // This is your reducer where you can provide actions
  {
    increment(state, action: Store.Action<number>) {
      const number = action.payload + 1;
      state.count += number;
    },
    decrement(state, action: Store.Action<number>) {
      state.count -= action.payload || 1;
    },
  },
  Dispatch.ALLOWED_ALL
);

Create your component called Mycomponent.tsx:

const [useCountStore, useCountDispatch] = countStore;

function Mycomponent() {
  // useCounter takes a selector as a parameter just like zustand does
  const count = useCountStore((state) => state.count);
  const { dispatch, actions, reset } = useCountDispatch();

  return (
    <View>
      <D11Text>{count}</D11Text>
      <Pressable onClick={() => { dispatch(actions.increment, 1) }}>Increment</Pressable>
      <Pressable onClick={() => { dispatch(actions.decrement, 1) }}>Decrement</Pressable>
    </View>
  );
}

If you want to use the shared state only with specific Routes, here's the API for that:

// Create a store called MyComponent.store.ts in src/store

import { createSharedStore } from 'src/wrappers/store/createSharedStore';
import { Store } from 'src/wrappers/store/store.interface';

// First parameter is your state, second parameter is reducer,
// third parameter is either an array of routes
// where you want your state to be accessible or
// an enum ALLOWED_ALL which says store can be accessed anywhere

export const counterStore = createSharedStore(
  // This is your state
  {
    count: 0,
    firstName: 'deepanshu',
    lastName: 'shukla',
  },
  // This is your reducer where you can provide actions
  {
    increment(state, action: Store.Action<number>) {
      const number = action.payload + 1;
      state.count += number;
    },
    decrement(state, action: Store.Action<number>) {
      state.count -= action.payload || 1;
    },
  },
  [Routes.SideDrawer]
);

// createSharedStore returns an Array, the first value is the hook of the store to read the data,
// the second is a hook which will give other methods to update the state

Here's the Markdown version of the updated text:

```markdown
## Create Your component called Mycomponent.tsx

```javascript
const [useCountStore, useCountDispatch] = countStore;

function Mycomponent() {
  // useCounter takes a selector as a parameter just like zustand does
  const count = useCountStore(state => state.count);
  const { dispatch, actions, reset } = useCountDispatch();

  return (
    <View>
      <D11Text>{count}</D11Text>
      <Pressable onClick={() => { dispatch(actions.increment, 1) }}>Increment</Pressable>
      <Pressable onClick={() => { dispatch(actions.decrement, 1) }}>Decrement</Pressable>
    </View>
  );
}

For using state in a non-reactive way:

// Create your store
export const counterStore = createSharedStore(
  // This is your state
  {
    count: 0,
    firstName: 'deepanshu',
    lastName: 'shukla',
  },
  // This is your reducer where you can provide actions
  {
    increment(state, action: Store.Action<number>) {
      const number = action.payload + 1;
      state.count += number;
    },
    decrement(state, action: Store.Action<number>) {
      state.count -= action.payload || 1;
    },
  },
  [Routes.SideDrawer]
);

// To access complete state in a pure function
const [useCounterStore] = counterStore;
useCounterStore.getState();

Go through Complete Documentaion Doc