CODEWITHSUNDEEP
javascriptreactjsredux
DaMatt91
DaMatt91

Reputation: 726

Modify nested state with Redux Reducer

I run into a problem that is litterally blowing my mind. I'm developing my web application using React and Redux, my application use a system of notification implemented with Firebase. Every notification is structured as below: 

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

After fetched, notification is send to notificationReducer with: 

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

And so far everything is ok.

My notificationReducer is structured as below: 

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;

The problem is that, when I pass state props to my presentational component, notification object is empty

My presentational component is reported below 

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)

Any suggestion ?

EDIT: In my reducer I tried to print the new state. I succesfully got this: enter image description here

But, Anyway In my presentational component I got an empty object

Upvotes: 0

Views: 53

Answers (1)

johnmikelridzz
johnmikelridzz

Reputation: 340

I think the dispatch call hasn't fired yet. Try executing the below

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
}

Also, using componentWillMount is UNSAFE (according to the ReactJS current documentation). Avoid using this lifecycle in the future.

Upvotes: 1

Related Questions