React-Redux mapStateToProps вызывается не везде

Question

Я работаю над флэш-сообщениями внутри реагируют

const mapStateToProps = state => {
  console.log(state.flashMessages);             <---This
  return {
    messages: state.flashMessages
  };
};
export class FlashMessagesComponent extends Component {
   render(){
     return <h1>Flash</h1>
   }
}
export default connect(mapStateToProps)(FlashMessagesComponent);

рассматривают FlashMessagesComponent как компонент для вызова флэш-сообщений в People

http://localhost:3000/people              <--works here

import React from 'react';
const People = () =>{
    return (
        <div>
            <FlashMessagesComponent/>
            <h1>People Page</h1>
        </div>
    )
}

export default PeopleDashboard ;

Указанная строка регистрирует состояниеflashMessages

но

http://localhost:3000/basic          <--not here

const BasicPage = () =>{
    return (
        <div>
            <FlashMessagesComponent/>
            <h1>Basic Page</h1>
        </div>
    )
}

export default  BasicPage;

указанная линия не регистрируется, т.е. mapStateToProp не работает

Answer 1

Вы экспортируете FlashMessageComponent, а не connected FlashMessageComponent.

Измените

export class FlashMessagesComponent extends Component {
   render(){
     return <h1>Flash</h1>
   }
}
connect(mapStateToProps)(FlashMessagesComponent);

на

class FlashMessagesComponent extends Component {
   render(){
     return <h1>Flash</h1>
   }
}
export default connect(mapStateToProps)(FlashMessagesComponent);