Skip to content

Instantly share code, notes, and snippets.

@tuliomonteazul
Last active September 9, 2015 20:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tuliomonteazul/b9909d7f5d521550b00c to your computer and use it in GitHub Desktop.
Save tuliomonteazul/b9909d7f5d521550b00c to your computer and use it in GitHub Desktop.
React Hangout Question

Digamos que temos uma estrutura assim:

<NewItem/>
<List>
  <Item/>
  <Item/>
</List>

O <NewItem/>, possui diversos componentes filhos e netos que precisam atualizar o seu estado. Poderíamos ficar passando vários callbacks de cima pra baixo, mas resolvemos ter uma store para o <NewItem/> e os componentes de dentro chamam as actions que atualizam essa store.

Quando queremos editar um <Item/>, o comportamento é muito parecido com o de criação, então reutilizamos o <NewItem/>.

O problema é: Como reutilizamos o <NewItem/> e ele possui uma store, quando 2 elementos dele são exibidos na tela, qualquer mudança em um afeta o outro. Exemplo: Estou editando um item e o que mudo nele aparece no componente de criação.

Qual seria a melhor solução nesse caso? Não utilizar actions/stores e passar um monte de callback pra todo lado ou implementar uma lógica para múltiplas actions/stores para um mesmo componente que também pode deixar o código complexo? (nós optamos pela 2a opção mas não estamos gostando)

Alguns componentes filhos do <NewItem/> possuem store e isso dificultou um pouco a implementação dessa lógica de múltiplas actions/stores para o <NewItem/>. Será que estamos criando muitos componentes com actions/stores e deveríamos criar mais "dumb components"?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment