Store undefined no Component

[mahenrique94]

Bom dia galera, estou com um problema para implementar o Redux com react-thunk. Quando faço:

constructor(props) {
    super(props);
    console.log(this.props.store);
}

Esta imprimindo undefined, sendo assim, não consigo realizar o dispatch, o que acham que pode ser?

[felipefialho]

Já debuggou para entender o o que está vindo em props?

[mahenrique94]

Já, esta vindo os valores normal, apenas a store que não esta chegando.

[felipefialho]

Tente usar object destructuring

const { store } = this.props

E veja se retorna algo.

[mahenrique94]

Ja havia tentado, retorna undefined, abaixo segue os arquivos:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import registerServiceWorker from './registerServiceWorker';
import { Provider } from "react-redux";
import { Router, Route } from "react-router";
import createHistory from "history/createBrowserHistory";
import store from "./store";

import Home from './components/home/Home';

import "./assets/css/normalize.css";
import "./assets/css/fontawesome/css/fontawesome-all.min.css";
import './index.css';

ReactDOM.render(
    <Provider store={ store }>
        <Router history={ createHistory() }>
            <Route exact path="/">
                <div className="o-app">
                    <Route component={ Home } exact path="/"/>
                </div>
            </Route>
        </Router>
    </Provider>,
    document.getElementById('root')
);

registerServiceWorker();

store.js

import { createStore, applyMiddleware } from "redux";
import reducers from "./reducers";
import thunkMiddleware from "redux-thunk";

export default createStore(reducers, applyMiddleware(thunkMiddleware));

index.js (reducers)

import { combineReducers } from "redux";
import { error, loading, success } from "./media";

export default combineReducers({
    error,
    loading,
    success
});

Home.js (Componente ao qual não esta chegando a store)

import React, { Component } from "react";

import App from "../../App";
import Media from "../media/Media";

import { list } from "../../actions/media";

export default class Home extends Component {

    constructor(props) {
        super(props);
        this.state = {medias : []};
        console.log(this.props);
        console.log(this.props.store);
    }

    componentDidMount() {
        // this.props.store.dispatch(list());
    }

    render() {
        return (
            <App>
                <Media/>
            </App>
        );
    }

}

Com certeza é algo muito bobo, mas ainda não achei.

Caso queira ver o projeto inteiro, esta no meu github: miniflix

[felipefialho]

@mahenrique94 Coloca no plnkr pra gente ver?

[mahenrique94]

Não conheço essa ferramenta, vou dar uma olhada.

[brunolemos]

A store não é passada por props, mas sim por context.
Mas raramente você precisa usá-la assim direto, veja se o @connect não resolve o que você quer.

[mahenrique94]

Tentei por context também @brunolemos, mas o this.context também esta undefined, não preciso utilizar o connect, pois estou trabalhando com redux-thunk, ele seria necessário se fosse redux normal.

[haskellcamargo]

Jovem, ConnectedRouter te dá acesso à store no react-router versão 4.

[mahenrique94]

Já tentei também @haskellcamargo, continuou undefined. Eu troquei o Router pelo ConnectedRouter, é isso mesmo?

[haskellcamargo]

Ok, uma gambizinha que tu pode fazer, então, é
<Route component={ props => <Home { ...props } store={ store } /> } exact path="/" />, mas se perguntarem, eu não disse nada. 🤐

[mahenrique94]

Com a gambizinha deu certo @haskellcamargo, a store chegou na props, porém preciso descobrir o que esta de errado, ja tentei de todos os jeitos e nada da store chegar de forma normal no context ou props.

[geovanerocha]

@mahenrique94 lê isso que vai te ajudar:
http://www.thegreatcodeadventure.com/the-react-plus-redux-container-pattern/

basicamente vc faz todos os paranauês relacionados ao redux em um ${seuComponente}.container.js, e o seu componente original fica puro sem importar connect nem nada, tudo isso fica no container.

[bernardodiasc]

Pelo que entendi o componente Home precisa do connect e mapStateToProps pra vc poder acessar a store.

Esse link ajuda a entender bem sobre isso https://stackoverflow.com/questions/38202572/understanding-react-redux-and-mapstatetoprops

[mahenrique94]

Obrigado @geovanerocha e @bernardodiasc, vou terminar de ler um artigo que o @haskellcamargo me passou e já vou ler o seus.

Mas eu vou chamar as actions diretas no redux-thunk, mesmo assim precisa fazer o map e connect? Era justamente isso que eu queria evitar.

[bernardodiasc]

O redux-thunk possui outra finalidade, ele não auto-conecta seus componentes no store, pra isso vc precisa do connect mesmo.

[felipefialho]

@mahenrique94 Avise se resolver :)

[mahenrique94]

Deu certo @lfeh, podem verificar se eu fiz certo:

Transformei o component Home em um container:

export default class Home extends Component {

    render() {
        return (
            <App>
                <Medias/>
            </App>
        );
    }

}

Depois criei um component chamado Medias para agrupar todas as Media e nele eu faço os maps e connect:

class Medias extends Component {

    componentDidMount() {
        this.props.list();
    }

    render() {
        return(
            <div className="o-container">
                { this.props.medias.map(media => <Media title={ media.title } slug={ media.slug }/>) }
            </div>
        );
    }

}

const mapStateToProps = state => {

    return {
        medias : state.success
    }

}

const mapDispatchToProps = dispatch => {

    return {
        list : () => dispatch(list())
    }

}

export default connect(mapStateToProps, mapDispatchToProps)(Medias);

É assim mesmo?

[brunolemos]

Tentei por context também @brunolemos, mas o this.context também esta undefined

Você não pode simplemente usar this.context.
Antes disso seu componente deve declarar quais contexts ele quer acessar, usando o contextTypes:

class HomeContainer extends PureComponent {
  static contextTypes = {
    store: PropTypes.object,
  }

  ...
}

não preciso utilizar o connect, pois estou trabalhando com redux-thunk, ele seria necessário se fosse redux normal

Acho que não tem relação uma coisa com a outra. Se vai acessar algum valor ou dispatch do redux dentro dos seus components, recomendo usar o connect. Melhor ainda se for usando decorator (@connect).

@mahenrique94 Recomendo fortemente você ler a documentação do react, do redux e também ver alguns vídeos antes de cair na implementação, senão vai continuar tendo dificuldade a toa:

• https://redux.js.org/
• https://egghead.io/courses/getting-started-with-redux

[mahenrique94]

Já fiz vários cursos na Alura e School of Net sobre React e Redux, porém, ainda estava meio confuso na minha cabeça, agora que consegui e li os artigos do pessoal, deu uma clareada, até então estava confundindo algumas coisas.

Logo com a prática essa nova maneira de fluxo vai ficar mais clara ainda.