My Redux state has changed, why doesn’t React trigger a re-render?

by

You’ve got everything hooked up correctly, but you’re missing one key concept for Redux:

With Redux, you never mutate any part of state.

From the Redux guide:

Things you should never do inside a reducer:

  • Mutate its arguments;
  • Perform side effects like API calls and routing transitions;
  • Call non-pure functions, e.g. Date.now() or Math.random().

In deleteSingleNotification, you’re using .splice to cut the old notification out of your array. Instead, you need to return a brand new array with the unwanted notification missing from it. The easiest way to do this is with the .filter function:

function deleteSingleNotification(notifications, notificationId){
    return notifications.filter (notification => {
        return notification.id !== notificationId
    }
}

Here is a JSBin with your working notification system!

So here is why this works: React-Redux’s job is to update your components whenever a specific part of your Redux store is changed. It uses a === test on every part of the state tree to know if anything changed.

When you go and change the state with something like .splice, it checks and thinks nothing is different.

Here’s an example to demonstrate the problem:

var array = [ 'a', 'b', 'c' ]

var oldArray = array

array.splice (1, 1) // cut out 'b'

oldArray === array // => true!  Both arrays were changed by using .splice,
                   // so React-Redux *doesn't* update anything

Instead, React-Redux needs us to do this:

var array = [ 'a', 'b', 'c' ]

var oldArray = array

array = array.filter (item, index => index !== 1) // new array without 'b'

oldArray === array // false.  That part of your state has changed, so your
                   // componenet is re-rendered

Redux uses this approach for performance reasons. It takes a really long time to loop through a big state tree looking to see if everything is the same. When you keep your tree immutable, only a === test is needed and the process gets much easier.

More Related Contents:

  1. What is mapDispatchToProps?
  2. What is the best way to access redux store outside a react component?
  3. Use Connect or pass data as props to children
  4. Use history.push in action creator with react-router-v4?
  5. How does connect work without mapDispatchToProps
  6. how to set initial state in redux
  7. How do I see state when logging to the console instead of Proxy object inside reducer action?
  8. React setState not Updating Immediately
  9. Load images based on dynamic path in ReactJs
  10. What is use of curly braces in an ES6 import statement?
  11. How can I persist redux state tree on refresh?
  12. Can I dispatch an action in reducer?
  13. Handling async request with React, Redux and Axios?
  14. Simple Conditional Routing in Reactjs
  15. When do I choose React state Vs Redux Store
  16. Next.js – Error: only absolute urls are supported
  17. Axios get in url works but with second parameter as object it doesn’t
  18. Getting an error “A non-serializable value was detected in the state” when using redux toolkit – but NOT with normal redux
  19. Redux: Why is avoiding mutations such a fundamental part of using it?
  20. Changing the layout of a component depending on Redux state
  21. Trace why a React component is re-rendering
  22. React router, pass data when navigating programmatically?
  23. ‘TypeError [ERR_INVALID_ARG_TYPE]: The “path” argument must be of type string. Received type undefined’
  24. Jest setup “SyntaxError: Unexpected token export”
  25. How to give Image src dynamically in react js?
  26. Global state in React Native
  27. How to fix 431 Request Header Fields Too Large in React-Redux app
  28. How to enable file upload on React’s Material UI simple input?
  29. Could not find “store” in either the context or props of “Connect(App)”
  30. React Router work on reload, but not when clicking on a link

Leave a Comment