Expor um estado - Caso simples

[SallesCosta]

Tudo bem Daciuk? No projeto do ReactFlix, eu estou mexendo para praticar e me deparei com algo simples. Como exibir um estado? Olha o exemplo a baixo. No Header eu quero um botão que mostre true ou false que é o estado de openRegisterVideo.

No código abaixo é o Header porém eu tirei os estilos e adicionei o mapStateToProps com isOpened e também como primeiro parâmetro do connect.

import React from "react";
import { connect } from "react-redux";
import styled from "styled-components";
import { headerHeight } from "utils/constants";
import { openRegisterVideo } from "reducers/ui/action-creators";

const MainHeader = ({ onOpenRegisterVideo, isOpened }) => (
  <Header>
    <HeaderTitle>Reactflix</HeaderTitle>
    <RegisterButton onClick={onOpenRegisterVideo}>
      Cadastrar vídeo
    </RegisterButton>
    <button>{isOpened}</button>
  </Header>
);

const mapStateToProps = (state) => ({
  isOpened: state.isRegisterVideoFormOpened,
});

const mapDispatchToProps = (dispatch) => ({
  onOpenRegisterVideo: () => dispatch(openRegisterVideo()),
});

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

Ao dar um console.log em isOpened , inicialmente da undefined O que estou deixando escapar.

@fdaciuk

[fdaciuk]

Oi @SallesCosta! O problema parece estar no seu reducer. Se o estado de isOpened está vindo como undefined no primeiro render, significa que você não deve ter definido um estado inicial para ele no reducer =)

[SallesCosta]

Bom dia @fdaciuk! O problema do undefined era porque o path estava errado.. deveria ser: isOpened: state.ui.isRegisterVideoFormOpened faltou o ui. O console.log do state inicial ta perfeito. No entanto eu ainda não consigo ver(exibir) o estado mudando dentro do botão. (true/false). Segue a foto e a nova versao do componente:

import React from "react";
import { connect } from "react-redux";
import styled from "styled-components";
import { headerHeight } from "utils/constants";
import { openRegisterVideo } from "reducers/ui/action-creators";

const MainHeader = ({ onOpenRegisterVideo, isOpened }) => {
  console.log("isOpened: ", isOpened);
  return (
    <Header>
      <HeaderTitle>Reactflix</HeaderTitle>
      <RegisterButton onClick={onOpenRegisterVideo}>
        Cadastrar vídeo
      </RegisterButton>
      <button>{isOpened}</button>
    </Header>
  );
};

const mapStateToProps = (state) => ({
  isOpened: state.ui.isRegisterVideoFormOpened,
});

const mapDispatchToProps = (dispatch) => ({
  onOpenRegisterVideo: () => dispatch(openRegisterVideo()),
});

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

[fdaciuk]

Perfeito! Sobre a exibição, o React não renderiza valores booleanos, null ou undefined.

Pra exibir esses dados, você precisa transformá-los em string:

String(isOpened)

// ou
`${isOpened}`

Aí sim o valor será exibido :)

[SallesCosta]

Deu certo.. Obrigado!