Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Re renderizacao componente Header

Tentei fazer o mesmo que fizemos com o componente timeline, porém por algum motivo ele nao chama a funcao render novamente quando ocorre a alteracao do estado.

Componente


import React, { Component } from 'react';
import TimelineApi from '../logicas/TimelineApi'
import { connect } from 'react-redux'

export class Header extends Component {

  pesquisa(event) {
    event.preventDefault();
    if (this.loginPesquisado.value) {
      this.props.search(this.loginPesquisado.value);
    }
  }

  render() {
    console.log('a');

    return (
      <header className="header container">
        <h1 className="header-logo">
          Instalura
          </h1>
        <form onSubmit={this.pesquisa.bind(this)} className="header-busca">
          <input ref={(input) => this.loginPesquisado = input} type="text" name="search" placeholder="Pesquisa" className="header-busca-campo" />
          <input type="submit" value="Buscar" className="header-busca-submit" />
        </form>
        <nav>
          <ul className="header-nav">
            <li className="header-nav-item">
              <span>{this.props.msg}</span>
              <a href="#">
                ♡
                  {/*                 ♥ */}
                {/* Quem deu like nas minhas fotos */}
              </a>
            </li>
          </ul>
        </nav>
      </header>
    );
  }
}
const mapStateToProps = state => {
  return {
    msg: state.header
  }
}

const mapdispatchToProps = dispatch => {
  return {
    search: (loginPesquisado) => {
      dispatch(TimelineApi.pesquisa(loginPesquisado));
    }
  }
}

const HeaderConatiner = connect(mapStateToProps, mapdispatchToProps)(Header);
export default HeaderConatiner;

Reducer

export function notificacao(state = '', action) {
    if (action.type === "ALERT") {
        return action.msg
    }
    return state;
}

Timeline API

import { listagem, comentario, like, notifica } from "../actions/actionCreator"

export default class TimelineApi {

    static pesquisa(login) {
        return dispatch => {
            fetch(`http://localhost:8080/api/public/fotos/${login}`)
                .then(response => response.json())
                .then(fotos => {
                    if (fotos.length === 0) {
                        dispatch(notifica('usuário não encontrado'));
                    } else {
                        dispatch(notifica('usuario encontrado'));
                    }
                    dispatch(listagem(fotos));
                    return fotos;
                });
        }
    }
1 resposta
solução!

Aqui estava errado

const mapStateToProps = state => {
  return {
    msg: state.header
  }
}

tem que ser o nome que esta no index

const mapStateToProps = state => {
  return {
    notificacao: state.notificacao
  }
}