Installation

This section guides you through installing the library and setting up your project to use it effectively.

Installation

First, install the library in your project using your preferred package manager:

npm

npm install fluwtate

yarn

yarn add fluwtate

pnpm

pnpm add fluwtate

Setting Up Your Store

To start using the library, you need to create your global store. Follow these steps:

1. Create a Store Begin by defining the initial state of your application and creating the store:

import { createStore } from "fluwtate";

const initialState = {
  user: null,
  todos: [],
};

export const store = createStore(initialState);

2. Creating a Module

A module is a self-contained part of your state that can be reused across different parts of your application. It’s a great way to organize your state and make it easier to manage and update.

To create a module, use the createModule function:

import { createModule } from "fluwtate";

const userModule = createModule(store, "user");

The createModule function takes two arguments: the store and the name of the module.

3. Add Middleware (Optional) Middleware allows you to extend the functionality of the store. For example, logging state changes:

import { createStore, devtool } from "fluwtate";

const store = createStore({
  user: null,
  todos: [],
});

store.use(devtool("CustomStore"));

4. React Integration To connect the store with your React components, use the useStore hook:

import { useStore } from "fluwtate";
import { store } from "./store";

function App() {
  const todos = useStore(store, (state) => state.todos);

  return (
    <div>
      <h1>Todos</h1>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    </div>
  );
}