Изменить вложенное состояние с помощью Redux Reducer

Question

Я сталкиваюсь с проблемой, которая буквально поражает меня. Я разрабатываю свое веб-приложение с использованием React и Redux, в моем приложении используется система уведомлений, реализованная с помощью Firebase. Каждое уведомление имеет следующую структуру:

var notification = {
  from_user:{
    name: 'John',
    surname: 'Doe'
  },
  payload:{
    message:'Lorem ipsum ...'
  }
  seen:false,
  timestamp:1569883567
}

После получения уведомление отправляется уведомлению Reducer с:

  dispatch({type:'FETCH_NOTIFICATION_OK',payload:notification})

И пока все в порядке.

Мое уведомление Редуктор имеет следующую структуру:

const INITIAL_STATE = {
  loading:false,
  notification:{}
}

const notificationReducer = (state=INITIAL_STATE,action)=>{
  switch(action.type){
    case 'FETCHING_NOTIFICATION':
      return {...state,loading:true}
    case 'FETCH_NOTIFICATION_OK':
      return {...state,loading:false,notification:action.payload} // I THINK PROBLEM IS HERE
    default:
      return state
  }
}

export default notificationReducer;

Проблема в том, что когда я передаю реквизиты состояния моему компоненту представления, объект уведомления пуст

Мой компонент представлениясообщается ниже

import React from 'react';

import {getNotification} from '../actions/actioncreators';
import {connect} from 'react-redux';

 class NotificationDetail extends React.Component {
  componentWillMount(){
    this.props.fetch_notification('9028aff78d78x7hfk');
    console.log(this.props.notification) // IT PRINTS: {}
  }

  render(){
    return(
      <div>
        'TODO'
      </div>
    )
  }
}

const mapStateToProps = state =>{
  return {
    is_loading:state.notificationReducer.loading,
    notification:state.notificationReducer.notification
  }
}

const mapDispatchToProps = dispatch =>{
  return {
    fetch_notification: (id_notification)=>dispatch(getNotification(id_notification))
  }
}

export default connect(mapStateToProps,mapDispatchToProps)(NotificationDetail)

Любое предложение?

РЕДАКТИРОВАТЬ: В моем редукторе я пытался напечатать новое состояние. Я успешно получил это:

Но, в любом случае, в моем компоненте презентации я получил пустой объект

Answer 1

Я думаю, что вызов по отправке еще не сработал. Попробуйте выполнить следующее

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

render() {
  console.log(this.props.notification); // It should print an output here if your xhr/ajax/axios call is correct
}

Кроме того, использование componentWillMount НЕ БЕЗОПАСНО (согласно текущей документации ReactJS). Избегайте использования этого жизненного цикла в будущем.