Como a aplicação precisa da lista de autores em duas telas, pensei em fazer a chamada unica no App.js, enviando aos componentes filhos (children) os dados via props, e assinando à atualização da lista feita pelo Autor.js, como segue:
class App extends Component{
constructor(){
super();
this.state={elementos:[], listaAutores:[]};
}
render(){
return (
<div id="layout">
<a href="#menu" id="menuLink" className="menu-link">
<span></span>
</a>
<div id="menu">
<div className="pure-menu">
<Link className="pure-menu-heading" to="/">Company</Link>
<ul className="pure-menu-list">
<li className="pure-menu-item"><Link to="/" className="pure-menu-link">Home</Link></li>
<li className="pure-menu-item"><Link to="/autor" className="pure-menu-link">Autor</Link></li>
<li className="pure-menu-item"><Link to="/livro" className="pure-menu-link">Livros</Link></li>
</ul>
</div>
</div>
<div id="main">
{React.Children.map(this.props.children, child =>{
return React.cloneElement(child, {lista: this.state.listaAutores});
})}
</div>
</div>
);
}
componentDidMount(){
$.ajax({
url:"http://cdc-react.herokuapp.com/api/autores",
dataType:'json',
success:function(resposta) {
this.setState ({listaAutores: resposta});
}.bind(this)
});
PubSub.subscribe('atualiza-lista-autores', function(topico,novaLista){
console.log("atualiza-lista-autores", novaLista)
this.setState({listaAutores:novaLista});
}.bind(this));
}
}Nos demais pontos, onde utilizo a lista retirei a chamada o GET, e estou usando a lista recebida no props. Funcionou muito bem, porém me surgiu uma dúvida. Imagine 2 usuários utilizando o sistema, um cadastra autores e o outro os livros. Ao enviar o POST, a tabela de autores é atualizada perfeitamente (PubSub pro App, e volta a nova lista para o render da tabela), porém o Select do Livro, não é atualizado em outra aba do mesmo navegador. Como eu conseguiria resolver esse problema?
