Updating nested data in redux store

by

Jonny’s answer is correct (never mutate the state given to you!) but I wanted to add another point to it. If all your objects have IDs, it’s generally a bad idea to keep the state shape nested.

This:

{
  items: {
    1: {
      id: 1,
      links: [{
        id: 10001
      }]
    }
  }
}

is a shape that is hard to update.

It doesn’t have to be this way! You can instead store it like this:

{
  items: {
    1: {
      id: 1,
      links: [10001]
    }
  },
  links: {
    10001: {
      id: 10001
    }
  }
}

This is much easier for update because there is just one canonical copy of any entity. If you need to let user “edit a link”, there is just one place where it needs to be updated—and it’s completely independent of items or anything other referring to links.

To get your API responses into such a shape, you can use normalizr. Once your entities inside the server actions are normalized, you can write a simple reducer that merges them into the current state:

import merge from 'lodash/object/merge';

function entities(state = { items: {}, links: {} }, action) {
  if (action.response && action.response.entities) {
    return merge({}, state, action.response.entities);
  }

  return state;
}

Please see Redux real-world example for a demo of such approach.

More Related Contents:

  1. Programmatically Navigate using react-router
  2. Why do we need middleware for async flow in Redux?
  3. React Context vs React Redux, when should I use each one? [closed]
  4. Await is a reserved word error inside async function
  5. How to overcome the CORS issue in ReactJS
  6. How to update single value inside specific array item in redux
  7. Why use Redux over Facebook Flux? [closed]
  8. Understanding React-Redux and mapStateToProps()
  9. Is this the correct way to delete an item using redux?
  10. React: how to load and render external html file?
  11. How do I access store state in React Redux?
  12. redux fetch body is not use with no cors mode
  13. Read Store’s Initial State in Redux Reducer
  14. How to sync Redux state and url hash tag params
  15. TypeError [ERR_INVALID_ARG_TYPE]: The “path” argument must be of type string. Received type undefined raised when starting react app
  16. How to trigger off callback after updating state in Redux?
  17. Changing the layout of a component depending on Redux state
  18. Cannot update a component while rendering a different component warning
  19. Uncaught Invariant Violation: Too many re-renders. React limits the number of renders to prevent an infinite loop
  20. Use Object.assign or Spread Operator in React/Redux? Which is a better practise
  21. Pros/cons of using redux-saga with ES6 generators vs redux-thunk with ES2017 async/await
  22. Programmatically change Redux-Form Field value
  23. Global state in React Native
  24. Update single value in item array | react redux
  25. Redux Presentational Components Vs Container Component
  26. How can I dispatch function in redux?
  27. minimise the code since I am using the same code only the content in p tags changes and component AccordionHeader header changes
  28. Component won’t update when a redux state change occurs
  29. React-Redux: Should all component states be kept in Redux Store
  30. Could not find “store” in either the context or props of “Connect(App)”

Leave a Comment