some data is not being passed from container component to dumb component using react-redux

Question

I am kinda bumped because it used to work automatically when you are using connect api from react-redux. But now I am facing a situation where some data is not getting updated when something gets returned from reducer..

this is my pseudo code..

in the reducer file I have..

case "SORT_BY_DATE":
    let startDateSort = state.startDateSort;
    let endDateSort = state.endDateSort;
    const sortByStartDateUp = function(a, b) {
        return new Date(a.start_date) > new Date(b.start_date) ? 1 :-1;
        }
    const sortByStartDateDown = function(a, b) {
        return new Date(b.start_date) > new Date(a.start_date) ? 1:-1;
        }
    const sortByEndDateUp = function(a, b) {
        return new Date(a.stop_date) > new Date(b.stop_date) ? 1 : -1;
        }
    const sortByEndDateDown = function(a, b) {
        return new Date(b.stop_date) > new Date(a.stop_date) ? 1 : -1;
        }
        let sortFunctionByDate = "";
    if (action.time == "start"){
        sortFunctionByDate = startDateSort == true ? sortByStartDateUp : sortByStartDateDown;
            startDateSort = !startDateSort;
    }else{
        sortFunctionByDate = endDateSort == true ? sortByEndDateUp : sortByEndDateDown;
        endDateSort = !endDateSort;
        }
    let filtered = state.status + "Banners";
        let banners_filtered =state['banners'].sort(sortFunctionByDate)
        state[filtered] = banners_filtered;
        state["banners"] = banners_filtered
        return Object.assign({}, state, {
            startDateSort,
            endDateSort,
            showImageButton: false,
        })

Up to here I was able to assert that I am getting correct info. from the banners_filtered variable.

this is my container component:

 const mapStateToProps = (state) => {
let {liveBanners} = state.BannerReducer;
console.log("liveBanners", liveBanners)
return {
    liveBanners
}

}

const BannerTableList = connect(mapStateToProps,mapDispatchToProps(BannerTable)

----I was able to log liveBanners here..as well--- But this value is not getting updated in the dumb compononent..like other variables I have been doing...Could it be because there is too much? computation inside the reducer? I hardly doubt that is the reason. But if you have any hunch what could have gone wrong please let me know. I am all ears at this point.. thanks.

--also there is no error shown in the console --- ---more code update--

const BannerTable = ({liveBanners}) => {
   console.log("banners", liveBanners)
}

above is my dumb component using stateless function and liveBanners never logged in the console.

okay i am reading this question.. http://stackoverflow.com/questions/35676952/redux-not-updating-components-when-deep-immutable-state-properties-are-updated?rq=1.. it is giving me some clue — slopeofhope, Oct 12 '16 at 14:05
When do you `let {liveBanners} = state.BannerReducer;` you will then have it in your container (smart) component as `this.props.liveBanners`, when you then need to pass into your dumb component... you should probably show the components you are passing this through/into — ajmajmajma, Oct 12 '16 at 14:10

score 0 · Answer 1 · answered Oct 12 '16 at 15:14

You're mutating your current state object in your reducer here:

state[filtered] = banners_filtered;
state["banners"] = banners_filtered
return Object.assign({}, state, {
    startDateSort,
    endDateSort,
    showImageButton: false,
})

This can prevent react-redux from detecting changes, which will prevent expected rerenders. You probably just need to change this to:

return Object.assign({}, state, {
    [filtered]:banners_filtered,
    banners: banners_filtered,
    startDateSort,
    endDateSort,
    showImageButton: false,
})

um.. I was almost certain that your suggestion woudl work but no dice...could there be another reason? — slopeofhope, Oct 12 '16 at 19:29

some data is not being passed from container component to dumb component using react-redux

1 Answers1