Input value referencing nested child object in redux state not updating

I have a function on redux that takes an object, the path to the value that needs updating, and the value.

I have inputs that value is equal to the value of the object on state.

When the listingObj changes on redux, i need the dom to refresh.

The reason i need this to refesh dom is beacuse i have an autofill with companies and when a user selects a company it updates all the values on the listingObj on redux state accordingly.

Thanks in advance!

    //REDUX
     import axios from 'axios';

var initialState = {
    listingObj: null,
}

const GET_UPDATED_OBJ = 'GET_UPDATED_OBJ'

export function updateObj(obj, path, value) {
    if (!path && !value) {
        console.log('obj on mount', obj)
        return {
            type: UPDATE_LISTING_OBJ,
            payload: obj
        }
    } else {
        console.log('updated obj', obj)
        path.split(",").slice(0, -1).reduce((obj, key) => obj[key] || (obj[key] = {}), obj)[path.split(",").pop()] = value;
        return {
            type: UPDATE_LISTING_OBJ,
            payload: obj
        }
    }
}


export default function reducer(state = initialState, action) {
    switch (action.type) {
        case UPDATE_LISTING_OBJ:
            return Object.assign({}, state, { listingObj: action.payload })

        default: return state;
    }
}


    //IN REACT COMPONENT
   import React from 'react';
import { connect } from 'react-redux';
import TextField from 'material-ui/TextField';
import axios from 'axios';
import { updateObj } from '../../../ducks/reducers/main_reducer'


class PropertyEdit extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            listing_id: ''
        }
    }

    componentDidMount() {
        let user_id = localStorage.getItem('user_id');
        let listing_id = this.props.listingId
        this.setState({
            listing_id: listing_id
        })
        axios.get(`/api/listings/${listing_id}`).then((res) => {
            this.props.updateObj(res.data)
        })
     }

    handleChange = path => event => {
        this.props.updateObj(this.props.listingObj, path, event.target.value)
    };

    render() {
        return (
                <div>
<CompanyNameAutofil />
 <TextField
     id="ownerStreetAddress"
      label="Owner Street Address"
       value={(this.props.listingObj.property.ownerCompany && this.props.listingObj.property.ownerCompany.streetAddress1) ? this.props.listingObj.property.ownerCompany.streetAddress1 : null}
                                onChange={this.handleChange('property,ownerCompany,streetAddress1')}
                            />

                </div>
        )
    }
}

function mapStateToProps(state) {
    return state
}



export default connect(mapStateToProps, { updateObj })(PropertyEdit)

Answer

When you use redux to update a value, componentWillReceiveProps will be called in any components that subscribe to that portion of the redux store. You can use setState in componentWillReceiveProps to update some values in state which will trigger a render. However, if state doesn’t need to be updated to reflect the changes you can also use this.forceUpdate() which will force the DOM to render again despite there being no change. It is worth noting that forceUpdate() should be use sparingly.