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"?