2

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.

5
  • Have you tried console.log(action) in rootReducer? Check your dispatch method is getting called.
    – Sridhar Sg
    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 Sep 27, 2017 at 4:18
  • Cool. What about the props in WaveformVisualizer ?
    – Sridhar Sg
    Sep 27, 2017 at 4:25
  • How do you update action.samples ? Is the value or reference changing ?
    – zer0chain
    Sep 27, 2017 at 6:47
  • Can you post your component's code?
    – Orrrr
    Sep 27, 2017 at 7:38

1 Answer 1

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}.

6
  • 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? Sep 27, 2017 at 17:12
  • 1
    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. Sep 27, 2017 at 18:08
  • 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? Sep 27, 2017 at 19:38
  • 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. Sep 27, 2017 at 19:42
  • 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 = [] Sep 27, 2017 at 21:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.