Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
6
respostas

Como passar Store para aplicação com várias Rotas?

Referente ao curso React parte 3: A arquitetura flux, implementação do Redux e server side rendering, no capítulo Usando o Redux como implementação do Flux e atividade Mão na massa: alterando o código para usarmos o Redux

por Rogério Prado
| 44.2k xp | 17 posts

Bom dia Alberto, neste Terceiro curso eu estou com uma estrutura de projeto diferente da demonstrada e neste ponto da iniciação do Redux não estou conseguindo avançar.

Meu index.js possui várias rotas. Sendo assim no App.js eu utilizo o "{this.props.children}" para exibir a rota escolhida. Assim não consegui passar o Store como propriedade para dentro de cada Component, como você faz no '<'Timeline ... store={store }/'>'. Tentei de algumas formas mas não tive sucesso. Segue abaixo sem os testes, poderia me direcionar?

Obrigado!

Código "index.js":

ReactDOM.render(
  '<'Router history={browserHistory}>
    '<'Route path=/ component={App}>
          '<'IndexRoute component={Dashboard}/>
          '<'Route path="/login" component={Login}/>
      '<'Route path="/dashboard" component={Dashboard}/>
      '<'Route path="/produtos" component={Products}/>
      '<'/Route>
  ''</Router>,

  document.getElementById('root')
);

Código "App.js":

class App extends Component {
  render() {
    return (
        '<'div className="main" >
          '<'Header />
          '<'div id="main">
            {this.props.children}
          '<'/div>
        '<'/div>
    );
  }
}

export default App;
6 respostas
por Alberto Souza
| 2676.6k xp | 5740 posts
Instrutor Desenvolvedor e Instrutor

Opa, ainda no terceiro curso eu mostro como disponibilizar a store para todas as rotas. Já tem um componente do próprio react-redux.

solução!
por Rogério Prado
| 44.2k xp | 17 posts

Desculpe ter atrapalhado então, vou tentar assistir o módulo 3 então. Eu acabo executando os novos ensinamento logo ao final de cada módulo e este modulo 2 me deixou de cabela em pé já, kkk.

Abraço!

por Alberto Souza
| 2676.6k xp | 5740 posts
Instrutor Desenvolvedor e Instrutor

Opa, não atrapalhou em nada :). A curiosidade é uma coisa ótima!

por Rogério Prado
| 44.2k xp | 17 posts

Bom dia Alberto, consegui implementar o Provider e tudo mais, resolvendo o meu problema.

Porém como eu utilizo o {this.props.children} para abrir a Rota específica, tive que colocar dentro de cada Component o XXX.contextTypes = { store : React.PropTypes.object.isRequired }

Teria como passar o store para dentro {this.props.children} para não precisar replicar isso em todo Component?

Ou precisaria mudar a forma de abrir as Rotas.

Obrigado!

class App extends Component { render() { return ( '<'div className="main" > '<'Header /> '<'div id="main"> {this.props.children} '<'/div> '<'/div> ); } }

por Alberto Souza
| 2676.6k xp | 5740 posts
Instrutor Desenvolvedor e Instrutor

Oi Rogerio, eu acho que não tem como.. ou você passa como argumento de cada rota filha ou deixa no escopo global mesmo...

por Joselânio Ferreira de Morais
| 28.6k xp | 14 posts

Tive o mesmo problema, apenas para complementar a solução do colega:

class Foo extends React.Component {
  static contextTypes = {
    redux: React.PropTypes.object
  }

  componentDidMount () {
    this.context.redux.getState()
  }
}

Discussão disponível em: https://github.com/reactjs/redux/issues/239