Entrar Ainda não tem acesso?
7
respostas

Passando store para component

Referente ao curso React parte 3: A arquitetura flux, implementação do Redux e server side rendering

por luiz henrique dandolini dos reis
| 183.2k xp | 50 posts

Estou com uma estrutura diferente do curso e estou com um problema de não conseguir passar a store para o component.

Da o seguinte erro:

TypeError: Cannot read property 'dispatch' of undefined
DespesaBox.componentDidMount
C:/Users/luizh/controleorcamentoreact/src/despesa/DespesaBox.js:22
  19 |            this.setState({categorias});
  20 |        })
  21 | 
> 22 |        this.props.store.dispatch({type:'LISTA',despesas:[]});
  23 | 
  24 |        //this.props.store.subscribe(() =>{
  25 |        //    this.setState({despesas:this.props.store.getState()});   
View compiled
▶ 14 stack frames were collapsed.
./src/index.js
C:/Users/luizh/controleorcamentoreact/src/index.js:71
  68 |     )}/>
  69 | )
  70 | 
> 71 | ReactDOM.render((
  72 |     <Router>
  73 |         <div>
  74 | 
View compiled
▶ 6 stack frames were collapsed.

meu codigo do index.js e do componente que recebe a store e este no link:

https://gist.github.com/LuizdosReis/5b2edfeac4e51d08399a1371a6756623

como posso fazer isto ?

7 respostas
por Mario Souto
| 377.3k xp | 735 posts
Alura Scuba Team Instrutor e Desenvolvedor

Luiz Henrique, tudo bom?

Quando você está passando a store, para acessar os métodos você precisa declarar que a store vem como uma propriedade obrigatória do componente pai que faz o subscribe.

ComponentePrincipal.contextTypes = {
  store: PropTypes.object.isRequired
}

Com isso você declara que o store vai estar disponível.

Espero ter ajudado :)

por luiz henrique dandolini dos reis
| 183.2k xp | 50 posts

Td certo e ai ?

isto eu coloco no meu index.js ou em cada componente que vou usar a store ?

por Mario Souto
| 377.3k xp | 735 posts
Alura Scuba Team Instrutor e Desenvolvedor

No caso em cada componentes que vai receber a store e fazer um subscribe

por luiz henrique dandolini dos reis
| 183.2k xp | 50 posts

Não conseguir fazer funcionar, também li na documentação do react que não era para usar context que ira quebrar nas proximas versões .

https://facebook.github.io/react/docs/context.html tem outra maneira de fazer isto ?

por Mario Souto
| 377.3k xp | 735 posts
Alura Scuba Team Instrutor e Desenvolvedor

Opa, então luiz,

Se quiser pegar uma referência nesse projeto, eu tenho implementado a solução na parte que renderizo as páginas a partir do arquivo routes.js: https://github.com/Avalum/avalum-front/tree/master/src

O Redux precisa ter acesso a isso, para poder passar o store para os componentes:

"If you aren't familiar with state management libraries like Redux or MobX, don't use context. For many practical applications, these libraries and their React bindings are a good choice for managing state that is relevant to many components. It is far more likely that Redux is the right solution to your problem than that context is the right solution."

por luiz henrique dandolini dos reis
| 183.2k xp | 50 posts

Opa deu certo, vou até dar um fork no teu projeto para pegar alguns exemplo.

Então se eu entendi bem, o context é usado por que não conseguimos passar props pelas rotas ?

por Hugo Oliveira
| 195.2k xp | 21 posts

O meu problema era que eu deveria ter usado PropTypes.object.isRequired invés de React.PropTypes.object.isRequired.

Obrigado pela referência, Mario!