Use Object.assign or Spread Operator in React/Redux? Which is a better practise

by

Redux docs recommends you to use the spread operator approach instead of the Object.assign

As per the docs:

An alternative approach is to use the object spread syntax proposed
for the next versions of JavaScript which lets you use the spread
(…) operator to copy enumerable properties from one object to
another in a more succinct way. The object spread operator is
conceptually similar to the ES6 array spread operator

The advantage of using the object spread syntax becomes more apparent when you’re composing complex objects

Using the Spread operator syntax

export const selectDiameter = (scaleData,size) => {
  return {
    type: SELECT_DIAMETER,
    payload: {...scaleData, 
                 diameter: {
                          ...scaleData.diameter,
                           selectedTube: size,
                           isClicked: true,
                           audio: {
                                ...scaleData.diameter.audio,
                                isPlayed: true
                           }
                 }

             }
   }
}

It still uses ES6. See the Redux docs for more info on configuring your code for the same

However when you are dealing with the nested data. I prefer to use immutability-helpers

For your code it will be like

import update from 'immutability-helpers';

export const selectDiameter = (scaleData,size) => {
  return {
    type: SELECT_DIAMETER,
    payload: update(scaleData, {
         diameter: {
            selectedTube: { $set: size},
            isClicked: { $set: true},
            audio: {
                isPlayed: {$set: true}
            }
         }
    })
   }
}

More Related Contents:

  1. Programmatically Navigate using react-router
  2. Why do we need middleware for async flow in Redux?
  3. When to use ES6 class based React components vs. functional ES6 React components?
  4. React Context vs React Redux, when should I use each one? [closed]
  5. Why is my onClick being called on render? – React.js
  6. Await is a reserved word error inside async function
  7. How to overcome the CORS issue in ReactJS
  8. How to update single value inside specific array item in redux
  9. Why use Redux over Facebook Flux? [closed]
  10. Understanding React-Redux and mapStateToProps()
  11. Is store.dispatch in Redux synchronous or asynchronous
  12. Cleaner/shorter way to update nested state in Redux?
  13. How do I access store state in React Redux?
  14. Getting an error “A non-serializable value was detected in the state” when using redux toolkit – but NOT with normal redux
  15. What’s the ‘@’ (at symbol) in the Redux @connect decorator?
  16. Read Store’s Initial State in Redux Reducer
  17. How to sync Redux state and url hash tag params
  18. TypeError [ERR_INVALID_ARG_TYPE]: The “path” argument must be of type string. Received type undefined raised when starting react app
  19. Changing the layout of a component depending on Redux state
  20. Cannot update a component while rendering a different component warning
  21. Uncaught Invariant Violation: Too many re-renders. React limits the number of renders to prevent an infinite loop
  22. Pros/cons of using redux-saga with ES6 generators vs redux-thunk with ES2017 async/await
  23. Programmatically change Redux-Form Field value
  24. having multiple instance of same reusable redux react components on the same page/route
  25. Update single value in item array | react redux
  26. Redux Presentational Components Vs Container Component
  27. How can I dispatch function in redux?
  28. minimise the code since I am using the same code only the content in p tags changes and component AccordionHeader header changes
  29. Could not find “store” in either the context or props of “Connect(App)”
  30. How to get simple dispatch from this.props using connect w/ Redux?

Leave a Comment