react-redux - connected component not rerendering on state change

Question

I have a component that I've passed through connect with a mapStateToProps argument to map one prop this.props.mainBuffer to a slice of my state tree from my store. Only the component is not rendering when I update that part of the state. (i realize that often the issue with redux is not changing the state immutably but I feel like I've done that).

My root (and only) reducer looks like:

function rootReducer(state = {}, action) {

    switch (action.type) {
        case NEW_BUFFER:
            return Object.assign({}, {mainBuffer: action.samples})
        default:
            return state;
    }
}

And the connect component is connected like this:

export default connect((state) => ({
    mainBuffer: state.mainBuffer
}))(WaveformVisualizer);

I have been working with react-redux for a couple weeks now and this has always worked. Typically if I specify that a slice of the state tree state.MainBuffer and make sure to immutably update it in the reducer, the component will have a render triggered. But it is no longer happening and I can't see why.

Have you tried console.log(action) in rootReducer? Check your dispatch method is getting called. — Sridhar Sg
– Sridhar Sg, Commented Sep 27, 2017 at 4:17
the reducer is definitely running the NEW_BUFFER case, I've got redux dev tools running and I see the state change diff on each action dispatch — Alex Bollbach
– Alex Bollbach, Commented Sep 27, 2017 at 4:18
How do you update action.samples ? Is the value or reference changing ? — zer0chain
– zer0chain, Commented Sep 27, 2017 at 6:47

markerikson · Accepted Answer · 2017-09-27 15:55:59Z

2

I believe we managed to solve this over in the Reactiflux chat channels. The listed example code wasn't quite accurate - the real code was doing Object.assign(state, {mainBuffer : action.samples}), and that was mutating the existing state. The solution was to actually pass a new empty object as the first argument, like Object.assign({}, state, {mainBuffer : action.samples}). The equivalent object spread usage would be return {...state, mainBuffer : action.samples}.

answered Sep 27, 2017 at 15:55

markerikson

67.9k10 gold badges161 silver badges177 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Alex Bollbach Over a year ago

At the time I made this post, this is the state my code was in. But yes in the end, with the right other combinations of code, added the {} in did the trick. But I have a question. If mapStateToProps is looking at state.mainBuffer shouldn't the component still be triggered? in other words, doesn't Object.assign(state, {mainBuffer: action.samples} change the mainBuffer property which react-redux is monitoring for shallow comparisons? (assuming action.samples is a new object each time?

markerikson Over a year ago

connect also looks to see if the root state object itself has changed. If the root object is the same reference as before, then it won't even re-run that component's mapState function. Similarly, combineReducers will return the previous parent state object if it thinks none of the slice reducers returned something new. I talked about this immutability behavior in The Tao of Redux, Part 1 - Implementation and Intent.

Alex Bollbach Over a year ago

at one point my NEW_BUFFER reducer was return { mainBuffer: actions.samples } and i did not see the component re-rendering. is that code an immutable update?

markerikson Over a year ago

It might be. Depends on where action.samples came from. For example, if that was the same array that was already in the state, then you've reused the existing array reference instead of creating a new one.

Alex Bollbach Over a year ago

that just shows me how opaque my understanding of JS reference semantics are. lets say action.samples was the same reference. i still would think the freshly instantiated object that gets that same object as the value for mainBuffer would be considered a change by redux. anyway, the array generated on each action dispatch was definitely a different object since each time the array was generated the function starts with var newBuffer = []

|

Collectives™ on Stack Overflow

react-redux - connected component not rerendering on state change

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related