Um novo state manager, menos elegante e menos burocrático.

[guisouza]

Pessoas, um ano e meio atrás postei um vídeo de uma prova de conceito usando react e proxies, pra tornar o desenvolvimento de aplicações simples menos custoso, nem hardcore (react na unha) e nem rocket-science (Redux, Saga, Recontraflux, asdjknwqondsfwe).

Entendo que a introdução dos hooks realmente mudaram muita coisa, porém particularmente achei a API muito FEIA e pouco amigável, principalmente para desenvolvedores novos que provavelmente nunca entenderão o porquê dos hooks terem sido um dia a nova sensação do verão.

Recentemente precisei mais uma vez trabalhar em uma interface simples, e me deparei com o mesmo problema mais uma vez, e decidi resolver de um jeito mais permanente. A partir de hoje estarei me dedicando a manter esse projeto e gostaria de ouvir feedbacks ;)

https://www.github.com/guisouza/react-swag

Estou escrevendo um artigo explicando as motivações conceituais por trás do projeto mas resumidamente :
Acredito que o modelo arquitetural Flux, bem como o próprio mecanismo de renderização do react, já foram responsáveis por mudar para sempre a forma como construímos e pensamos interfaces gráficas. Hoje, escreveríamos por exemplo códigos em angular 1.x que evitariam boa parte dos problemas que nos fizeram deixar ele no passado. Dito isso, sinto a necessidade de algo mais flexível e menos burocrático.

[felipefialho]

Como esperado vindo de você, projetão @guisouza!

[kivervinicius]

Não entendi só o titulo "menos elegante"

[kazzkiq]

Cara, dei uma lida aqui nos exemplos e achei muito foda! É um bom meio termo entre lidar com states/hooks "na mão" ou sofrer com a verborragia de um Redux da vida!

Sempre achei que as soluções pra trabalhar com estados compartilháveis/globais no React eram muito complicadas, e o seu projeto mostrou que é possível resolver o problema de uma forma simples e elegante.

Apenas uma dúvida de leigo sobre o projeto: Existe algum impacto significativo no caso de usar esse formato de Stores em aplicações com muitos estados? Se eu criar uma store com vários estados, ao atualizar apenas um deles, isso dispara um render de outros pontos da minha aplicação ou apenas os componentes que utilizam o estado modificado é que são atualizados?

[guisouza]

Como esperado vindo de você, projetão @guisouza!

Ahh cara ! que bom que você gostou ! Obrigado !

Não entendi só o titulo "menos elegante"

Devo ter sido um pouco sarcástico .. :D

Cara, dei uma lida aqui nos exemplos e achei muito foda! É um bom meio termo entre lidar com states/hooks "na mão" ou sofrer com a verborragia de um Redux da vida!

Sempre achei que as soluções pra trabalhar com estados compartilháveis/globais no React eram muito complicadas, e o seu projeto mostrou que é possível resolver o problema de uma forma simples e elegante.

Apenas uma dúvida de leigo sobre o projeto: Existe algum impacto significativo no caso de usar esse formato de Stores em aplicações com muitos estados? Se eu criar uma store com vários estados, ao atualizar apenas um deles, isso dispara um render de outros pontos da minha aplicação ou apenas os componentes que utilizam o estado modificado é que são atualizados?

Apenas os componentes utilizando o estado afetado serão atualizados. Se tratando de react, essa afirmação tem muitos poréns, e depende muito da maneira como você estrutura o código

De qualquer forma, vou passar um bom tempo nos próximos anos, me dedicando a dois projetos, esse focado em front, e no próximo meetup da nodebr, se tudo der certo, também vou publicar um projeto focado em nodejs, sendo assim, eu aceito sugestões de apps pra escrever usando swag.
To preparando alguns exemplos mais complexos como carrinho de compras (use case Classico), e também to trabalhando em um time travel embutido algo como store.undo() / store.redo() nos próximos dias vou começar a publicar.
Por enquanto recomendo dar uma brincada com essa demo : https://codesandbox.io/s/stupefied-margulis-1febt
Repare que o componente Header não precisa ser conectado na Store por não precisar reagir a nenhuma mudança de estado.
Uma oura característica ainda um pouco bugada, porém implementada, é poder conectar o seu componente a uma porção da Store apontando para uma chave, assim, seu componente só recebe broadcast das mudanças daquela porção do estado.

cons store = createStore({
a : {
 b: {
  counter: 2
 }
},
dummyState : 1
})
// o Comportamento esperado, é que somente mudanças em a.b.* atualizem o componente : 
connect(Component, store.a.b)

[kazzkiq]

Fala @guisouza, estou usando o react-swag em um projeto e fui acessar a documentação hoje porém não encontrei nem ela nem o repositório aqui no GitHub. Ele morreu? 😢

[guisouza]

@kazzkiq o projeto vai voltar, ele mudou muito e acabei começando do zero de novo, entendo que é um puta problema ele ter saído do ar, mas prometo que é por um bom motivo.
vou anexar aqui embaixo a mínima documentação que tinha escrito...
acredito que na semana que vem teremos tudo novo de novo ..

[guisouza]

SWAG is a straightforward React state manager wich sounds familiar for those who likes View-Model pattern.

Install

npm install --save react-swag

yarn add react-swag

Basic Setup

You will need two things, connect and createStore

★ connect(ReactComponent, Store)

★ createStore(Object or Class)

You get than like this :

import { createStore, connect } from 'react-swag';

Now you would like to create your store, with your data and methods as object properties.

const store = {
    counter: 1,
    add(){
        this.counter++;
    }
}
// you could also do this :
class Store = {
    constructor(){
        this.counter = 1
    }
    add(){
        this.counter++
    }
}

Now you create your presentation layer as a React Component directly accessing your store

const Component = () => (
    <div onClick={Store.add}>{Store.counter}</div>
)

now connect your component to the store if you want it to update on store changes

const ConnectedComponent = connect(Component, store);

BOOM ! its working.

LIVE DEMO

Things you need to know about SWAG

💎You can easily deal with async operations using ing helper

const wait = time => new Promise(r => setTimeout(r, time));

const Store = createStore({
  ammount: 8,
  async lazyAdd() {
    await wait(1000).then(() => this.ammount++);
  }
});

const Component = connect(
  ({ ing }) => ing(Store.lazyAdd) ? "loading" : <div onClick={Store.lazyAdd}>{Store.ammount}</div>,
  Store
);

LIVE DEMO

What if you would like to have separated loading behaviors within the same method ?

const wait = time => new Promise(r => setTimeout(r, time));

const Store = createStore({
  ammount: 8,
  async lazyAdd(ammountToAdd) {
    await wait(1000).then(() => (this.ammount += ammountToAdd));
  }
});

const Component = connect(
  ({ ing }) => {
    return (
        <div>
            {Store.ammount}
            <br />
                {ing(Store.lazyAdd, [5]) ? 

                     "Loading ..." 
                    :
                    <input type="button" onClick={() => Store.lazyAdd(5)} value="add 5" />
                }

                {ing(Store.lazyAdd, [10]) ? 

                     "Loading ..." 
                    :
                    <input type="button" onClick={() => Store.lazyAdd(10)} value="add 10" />
                }
        </div>
    );
  }, Store );

LIVE DEMO

💎Your changes to store properties will always sync to the UI.

const Store = createStore({
  ammount: 8,
  add() {
    this.ammount++;
  }
});

setInterval(() => {
  Store.add();
}, 100);

const Component = connect(
  () => <div onClick={Store.add}>{Store.ammount}</div>,
  Store
);

LIVE DEMO

you can also direct set

Like this :

setInterval(() => {
  Store.add();
}, 100);

or this (for debugging purpose) :

window.store = Store

💎I am still thinking the whole nomenclature

💎I`d love to hear yout opinion

License

MIT