O coração de qualquer site ou aplicativo de navegador moderno (aquele SPA, aquele PWA, outras três letras) é o seu estado ou estado.
Podemos discutir arbitrariamente sobre o que é melhor - React, Vue, Svelte, Angular, podemos continuar usando o jQuery, mas, na realidade, não é tão importante. Esta é a parte de nossa aplicação que vemos - seus "músculos" e "pele". Mas a maneira como você pensa - com que termos você opera, que mecânica você usa para visualizar em sua mente como os dados "fluem" em seu aplicativo - tudo isso vem do seu esqueleto. Do gerente estadual.
Lembre-se, há alguns anos, estávamos cansados ​​de JavaScript ? Agora vejo um grande número de pessoas se cansando de gerentes de Estado. Restaurado? Sim , sim e sim . RxJS? Também . MobX? Se é tão simples - caramba, por que tem uma página trap.html na documentação ?
A resposta "por que Ă© tĂŁo difĂcil para muitos" Ă©, mas primeiro vocĂŞ precisa formular o problema com precisĂŁo.
Escolhendo uma manjedoura de estado - escolhemos uma maneira de pensar. Existem muitas opções agora, mas as abordagens mais populares se enquadram em 3 grupos:
Flux / Redux-like : um repositório global com ações e redutores. Existem muitos deles, mas eu mesmo mencionaria Redux , Effector , Storeon , Unstated e Reatom . Estes não são "os melhores dos melhores", mas os "mais diversos". Todas as soluções da lista trazem algo único e incomum, e você pode pegar várias idéias interessantes.
Essa abordagem Ă© primariamente imperativa (completa na Thuring) e global .
Observáveis e tubos. As soluções mais populares de hoje neste grupo sĂŁo RxJS e MobX . Dos menos conhecidos - Kefir , Bacon , CycleJS . Svelte , a propĂłsito, tambĂ©m se enquadra nessa lista. Eles sĂŁo todos muito diferentes do ponto de vista da experiĂŞncia do desenvolvedor, mas do ponto de vista fundamental eles diferem de uma Ăşnica maneira: MobX, Svelte e outros podem ser descritos do ponto de vista da topologia pelo gráfico usual “o que aciona o quê”, mas o RxJS nĂŁo Ă©, seu gráfico de links multidimensionais e "loops estranhos" podem aparecer neletransmitir observáveis ​​em observáveis. Isso o torna mais poderoso, por um lado, e mais complexo, por outro. Uma histĂłria semelhante foi com o roteiro. Eles descobriram que seu sistema de tipos Ă© completo na TurĂngia. A Ăşnica coisa que se seguiu foi que ele poderia congelar na etapa de verificação e eles adicionaram um limite de tempo ao trabalho.
Isso pode parecer um pouco estranho, mas, em geral, essa classe de soluções tende a ser local ou ad-hoc e declarativa - mas sem diminuir a capacidade de usar lógica arbitrária.
, - , , , , “” . , Lodash, Ramda, io-ts. - LISP JS, — -- “”, , .
GraphQL . Apollo Relay — , . Falcor — GraphQL Netflix, GunDB PouchDB. , Redux, MobX, RxJS . “” GraphQL. , . 100% ( )
, . — , ; , - . .
: “” “” 100% : redux- , , RxJS — . JS , , .
: - ID ID, — . (), — .
. - . , , , "state of js” .
.
.
, , . , — , . , .
— , , . , , — GraphQL . , , .
, - .
SPA , : , , SQL- ; .
Rails, , .
, , ( ) — API , .
:
- : . , , , .
- : statechart. — . — observables (RxJava, RxRuby, RxSwift, RxBrainfuck — ) . — - , , - .
. , , . — . , , , , — . , , - . — , .
— - , . - , . — , , , .
. , , , corrupted. : , DTO. . — LISP-. : , .
— . , — , , , — - , . , , . : - — , . , , CRDT-. — .
:
.
— , , — , , . , . , , . await getBlogPost(id), : @gql("blogPost(id){...}") class extends Component, — , .
. . ImmutableJS, Object.freeze, readonly Record & Tuple stage 1 proposal. . - shared worker.
, — , . XState , ( ), . , . .
Qualquer interação entre os dois mundos deve ser explĂcita, diretamente diferenciada no cĂłdigo, para nĂŁo acontecer por acaso durante a revisĂŁo do cĂłdigo e, o mais importante - para ocorrer na terra do usuário e nĂŁo nas bibliotecas.
VocĂŞ nĂŁo deve escolher soluções especĂficas, mas para o meu novo projeto eu usaria o GraphQL + Apollo para armazenar conhecimento e para gerenciamento de estado - Xstate + RxJS, felizmente, eles sĂŁo amigos um do outro .
Pare de se preocupar em colocar tudo em uma solução. Você não precisa disso.