Redux not re-rendering the component

Question

One of my components are not rendering correctly when the redux state has changed. I believe it has to do with the mutation of the state but I can't seem to fix it. The state does change correctly and all the data is populated correctly, but it just doesn't re-render the component. When I connect it to the local state of the component and set the state there, it works correctly. Below is the reducer I have created. The problem I am having is with the COMPANY_SUCCESS case.

const companyReducer = (state = initalState, action) => {
console.log("Company State: ", state);
switch (action.type) {
case COMPANY_REQUEST:
    return {
        ...state,
        isFetching: true
    };
case COMPANY_SUCCESS:
    return {
        ...state,
        isFetching: false,
        companies: {
            ...state.companies,
            [action.companyID]: {
                companyInfo: action.companyInfo,
                services: action.companyInfo.services,
                socialMedia: action.companyInfo.socialMedia,
                companyImages: action.companyInfo.companyImages,
                companyHours: action.companyInfo.companyHours,
                about: action.companyInfo.about
            }
        }
    };
case COMPANY_FAILURE:
    return {
        ...state,
        isFetching: false,
        error: action.error
    };


const initalState = {
    isFetching: false,
    error: null,
    companies: {}
};

function mapStateToProps(state) {
return {
    companyReducer: state.companyReducer
  };
}

Answer 1

I imagine your reducer object is not changing. Objects (and arrays) are references in JavaScript. You can mutate the object without the reference changing. If the reference does not change, then React believes that the new value is the same as the old value, and it will not re-render. The same way <Test value={2} /> does not re-render when you return <Test value={2} /> again, your component <MyComponent companyReducer={theStateObject} /> will not re-render when you return <MyComponent companyReducer={theStateObject} /> again. Your theStateObject may have changed some of its key-value pairs, but the state object itself is still pointing to the same location in memory.

You should be returning as a property to your component some value within the state, not the entire state. Even something as simple as return state.companyReducer such that your props as isFetching , companies , and error will trigger a re-render because your companies object gets a new location in memory when you use the spread operator to change it.

The fact that you are returning {...state,etc} would imply that the state became a newly generated object in memory, but that's more of redux's internals for how it handles the returned object, so I cannot say for certain that it is keeping the newly generated object as opposed to Object.assign ing it.