React e RxJS combinam?

[waldemirflj]

Boa tarde,

Estou responsável pelo desenvolvimento de uma POC na empresa que trabalho e estamos em fase de escolhermos nosso framework: Angular ou React. Estou pensando em desenvolver está POC com Angular, porém a empresa/cliente já utilizam React-Native em outros produtos. Dúvida: Alguém aqui já trabalhou com RxJS no React? Se sim, foi de boa?

Redux tem a mesma função que o RxJS correto? No React temos que registrar todos os eventos/store e existindo interação com algum o mesmo dispara atualização para todos os componentes, correto? Se não for isso, poderiam me explicar como eu poderia ter um RxJS no React ou se isso é uma boa prática?

Obrigado.

[ninetails]

Não mas sempre tive curiosidade de utilizá-lo. Não acho que seria a mesma função do Redux, pois ao invés de ter um fluxo único, seriam diversos fluxos menores separados, focando na stream de cada evento.

Ah sim, tem o MobX que é bem parecido e tem bastante gente usando tanto pra Angular quanto pra React.

E quando dei uma estudada também vi gente usando o RxJS como middleware para Redux

Se realmente fizer a POC, manda um retorno do que achou :D

[tarciozemel]

Bem, a Netflix usa...

[alanhr]

https://github.com/redux-observable/redux-observable

Redux + RxJs

[arojunior]

Opa! Aqui na Segware trabalhamos com React + Redux + Redux-observable + RxJs. As ferramentas se complementam. Redux é somente o state container. O redux-observable trabalha como middleware e nos ajuda com actions mais complexas/encadeadas. Já do Rx, utilizamos algumas coisas como buffer, timer, debounce... Ele tem uma série de ferramentas interessantes.

É bom pesquisar antes pra não utilizar canhão pra matar barata. Aqui temos uma aplicação relativamente grande, por isso utilizamos essa combinação.

[juanpinheiro]

Nosso time precisou entregar um projeto extremamente customizável. Uma única tela com infinitas variações e componentes, que se moldava completamente de acordo com a necessidade de cada cliente! Nesse caso o RxJS foi a nossa salvação!

Eu amo o Redux, porém sua verbosidade acabou complicando o código nessa situação. Então o @caferrari teve a brilhante ideia de substituir totalmente o Redux pelo RxJS. No início eu confesso que parecia uma ideia muito radical e eu fiquei um pouco preocupado, mas no fim, foi a melhor escolha que fizemos.

Para a gerenciar o estado uma solução agradável para quem está acostumado com o Redux é criar uma store usando o BehaviorSubject

const state$ = new BehaviorSubject(Object.assign({}, initialState)); 

Você pode criar uma função responsável por setar um novo estado

const setState = newState=> {
    const currentState = JSON.parse(JSON.stringify(state$.getValue()));

    state$.next({
      ...currentState,
      ...newState
    });
  };

Depois é só criar uma service usando essa store

import { store } from "./store";

const initialState = {
  hello: "world"
};

const { state$, setState } = store(initialState);

const sayHello = name => {
  setState({ hello: name });
};

const getState = state$.asObservable();

const actions = {
  sayHello
};

export { getState, actions };

Fiz esse exemplo tentando simplificar ao máximo https://codesandbox.io/s/example-react-rxjs-rvmxh

Hoje não trabalho mais nesse projeto, mas aprendi muito com essa stack! No projeto, o pessoal criou um HOC seguindo a idéia do @danieloprado que tem vários exemplos legais no github dele!

[al3xr3is]

Cara eu to estudando reatividade e como trabalho com Angular na empresa tive de dar uma boa fuçada no código fonte deles. Minha mente explodiu quando você fez a relação entre o BehaviorSubject com um store do Redux. Tudo fez sentido pra mim e vc tem um jeito de explicar que pelomenos pra mim ficou tudo muito claro!

[lucastrvsn]

Acredito que hoje o redux + redux-saga seja a combinação mais perfeita que temos no react.

[lucasousi]

Fiz um projeto de tamanho médio usando o RxJS para "gerir os estados" sem a existência de uma Store, somente com Observabless, subscribes e next(). Funcionou bem de acordo com o esperado e não comprometeu a performance.

Não foi necessário usar Redux ou qualquer outra lib de gestão de estado.

[wilsonneto-dev]

Daqui em uma plataforma de Vídeo on Demand relativamente grande, +1 milhão de users e cerca de 150 request/segundo na infra, Context API resolveu tudo que precisei...