Gerenciar o estado global em aplicativos JavaScript, especialmente quando você precisa acessá-lo em contextos React e não React, pode ser desafiador. As bibliotecas existentes geralmente envolvem configurações pesadas, complexidade desnecessária e estão fortemente acopladas ao React. Mas e se você pudesse administrar o estado com a elegância e a simplicidade da dobradura de papel? Digite Origami-State-Manager (OSM).

O que é OSM?

Origami-State-Manager (OSM), pronunciado "incrível", é uma biblioteca leve de gerenciamento de estado projetada para ser simples, flexível e escalável. Inspirado na arte japonesa do Origami, que transforma uma folha de papel comum em designs complexos, o OSM permite gerenciar o estado global da sua aplicação com a mesma elegância. Assim como o papel, é incrivelmente leve, tornando-o perfeito para aplicações onde a simplicidade e o desempenho são importantes.

Por que OSM?

A jornada para construir o OSM começou como uma busca por uma solução que pudesse:

• Minimizar Boilerplate: O gerenciamento de estado deve ser direto e exigir o mínimo de configuração possível.
• Seja versátil: Trabalhe perfeitamente em contextos React e não React.
• Mantenha-se leve: Evite sobrecarregar seu pacote com códigos desnecessários.
• Permaneça flexível e escalável: Adapte-se facilmente às diferentes necessidades do projeto, mantendo o desempenho.

Se você está cansado de soluções com excesso de engenharia e quer algo que simplesmente funcione, o OSM pode ser a ferramenta "incrível" que você precisa.

Principais recursos

• Configuração mínima: Defina e gerencie rapidamente seu estado global com uma API limpa e intuitiva.
• Compatibilidade com React e Non-React: Os estados podem ser acessados ​​e atualizados a partir de componentes React e funções JavaScript simples.
• Leve: Leve como papel, o OSM mantém seu aplicativo rápido e responsivo.
• Opções de persistência: Torne seus estados persistentes com uma configuração simples.

Introdução ao OSM

Pronto para adicionar um pouco de OSM ao seu aplicativo? Veja como começar:

1. Instale a biblioteca:

npm install origami-state-manager

2. Crie uma loja:

Uma loja é onde vivem todos os seus estados globais. Configurar um é tão fácil quanto passar seus valores de estado iniciais para createStore:

// store.ts
import { createStore } from "origami-state-manager";

const initialValues = {
  origami: 0,
  osmness: 0,
};

export const store = createStore(initialValues);

Você também pode tornar a loja persistente fornecendo um nome de loja:

export const store = createStore(initialValues, "myOSMness");

3. Estado de acesso e atualização:

Para componentes React, use o gancho useStateListener para acessar e atualizar o estado:

import { store } from "./store";
import { useStateListener } from "origami-state-manager";

function OrigamiComponent() {
  const origami = useStateListener("origami", store);

  return (
     store["origami"].value = new Date().getSeconds()}>
      Origami Count: {origami}
    
  );
}

4. Estado de acesso em funções não React:

Você também pode trabalhar facilmente com estados fora do React:

// utils.js

function getProfile() {
  let profile = store["profile"].value;
  if (!profile) {
    store["profile"].value = {};
  }

  return store["profile"].value;
}

Casos de uso

OSM é perfeito para cenários onde:

• Você precisa de uma solução leve para gerenciamento simples de estado global.
• Seu projeto envolve lógica React e não React que deve compartilhar o estado global.
• Você deseja evitar a complexidade de bibliotecas maiores, como Redux ou MobX.

Atenção: algumas dificuldades pela frente!

OSM ainda está em seus estágios iniciais e não foi totalmente testado em todos os ambientes. Embora seja ideal para projetos menores e necessidades diretas do estado, é aconselhável ser cauteloso ao usá-lo em cenários complexos. Se você encontrar algum problema, informe-o para que a biblioteca possa continuar a melhorar.

Contribuindo para o OSM

Interessado em ajudar a tornar o OSM ainda mais incrível? Contribuições são bem-vindas! Confira as diretrizes de contribuição para começar.

Fique atualizado

O changelog é atualizado regularmente com todas as novas alterações e melhorias.

Considerações Finais

Origami-State-Manager (OSM) tem como objetivo fornecer uma solução simples, mas poderosa, para gerenciamento global de estado sem inchaço. Ao manter a configuração mínima e o desempenho alto, o OSM permite que você se concentre na construção de recursos em vez de lutar com a complexidade do estado.

Experimente e experimente um novo nível de OSM-ness em seus projetos!

Comece a usar o OSM hoje: npm: origami-state-manager