Реактивный компонент не рендерится после обновления состояния редукции

Question

Я создаю приложение на реагирующем языке и использую избыточность. Я использую websocket для обновления моего состояния редукса. В веб-интерфейсе я нажимаю кнопку, и это увеличивает счет в моем приложении. То, что я хочу сделать, это отображать модальное значение каждый раз, когда обновляется состояние приращения, вот мой код:

Websocket.js:

import RoutesApp from './constantApi'
import { store } from '../store/configStore'

export function initWebSocketConnection(teamName) {
    var ws = new WebSocket('ws://' + RoutesApp.HostName + '/ws?teamId=' + teamName);

    ws.onopen = () => {
        // connection opened
        // nothing special to do
    };

    ws.onmessage = (e) => {
        // a message was received
        const message = JSON.parse(e.data);
        switch (message.messageType) {
            case 'giveaway/message':
                store.dispatch({type: 'GIVEAWAY', value: message});
                break
        };

        ws.onerror = (e) => {
            // an error occurred
            console.log(e.message);
        };

        ws.onclose = (e) => {
            // connection closed
            console.log(e.code, e.reason);
        };
    };
  }

Редуктор:

const initialState = {
  notification: []
}

const teamPaths = (state = initialState, action) => {
  let nextState
  switch (action.type) {
    case 'GIVEAWAY':
      nextState = {
        ...state,
      }
      nextState.notification.push('Vous avez gagné une charge de pouvoir')
      break
    default:
  }
  return nextState || state
}

export default teamPaths

Modal.js

lass ModalGeneral extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      modalVisible: false,
    }
  }

  visibleYe(){
    if(this.props.notification.length > 0){
      return !this.state.modalVisible
    }else if(this.props.notification.length === 0){
      return this.state.modalVisible
    }
  }

  render() {
    return (
      <Modal
        style={{ justifyContent: 'center' }}
        animationIn="slideInUp"
        animationInTiming={1000}
        animationOutTiming={1000}
        isVisible={this.visibleYe()}
      >
        <View style={styles.container}>
          <View style={styles.titleModal}>
            <Text style={styles.title}>{this.props.notification}</Text>
          </View>
      </Modal>
    )
  }
}

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

export default connect(mapStateToProps)(ModalGeneral)

Но когда я вызываю мой модальный компонент в другом компоненте, модальный открывается только тогда, когда компоненты рендерится, тогда все, как я хочу, с отображаемым нажатием сообщения, но почему обновление состояния избыточности не делает рендеринг компонента ? Я видел много такого решения:

const mapStateToProps = state => ({
  notification: state.myReducer.notificaion
})

замена на имя моего редуктора конечно: teamData, но он не работает и выдает ошибку:

cannot read property notification of undefined

Мне действительно это нужно, и я не понимаю проблемы, чего мне не хватает?

[EDIT]

configStore.js

import { createStore } from 'redux'
import teamData from './reducers/teamData'


export const store = createStore(teamData);