Update single value in item array | react redux

by

You need to transform your todos array to have the appropriate item updated. Array.map is the simplest way to do this:

case "COMPLETE_TASK":
    return {
        ...state,
        todos: state.todos.map(todo => todo.id === action.id ?
            // transform the one with a matching id
            { ...todo, completed: action.completed } : 
            // otherwise return original todo
            todo
        ) 
    };

There are libraries to help you with this kind of deep state update. You can find a list of such libraries here: https://github.com/markerikson/redux-ecosystem-links/blob/master/immutable-data.md#immutable-update-utilities

Personally, I use ImmutableJS (https://facebook.github.io/immutable-js/) which solves the issue with its updateIn and setIn methods (which are more efficient than normal objects and arrays for large objects with lots of keys and for arrays, but slower for small ones).

More Related Contents:

  1. React setState not updating state
  2. Programmatically Navigate using react-router
  3. Why do we need middleware for async flow in Redux?
  4. Does React keep the order for state updates?
  5. React: how to update state.item[1] in state using setState?
  6. React Context vs React Redux, when should I use each one? [closed]
  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. setInterval in a React app
  12. React: how to load and render external html file?
  13. How do I access store state in React Redux?
  14. redux fetch body is not use with no cors mode
  15. Read Store’s Initial State in Redux Reducer
  16. TypeError [ERR_INVALID_ARG_TYPE]: The “path” argument must be of type string. Received type undefined raised when starting react app
  17. How to trigger off callback after updating state in Redux?
  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. Pros/cons of using redux-saga with ES6 generators vs redux-thunk with ES2017 async/await
  21. Programmatically change Redux-Form Field value
  22. Global state in React Native
  23. How to check for broken images in React JS
  24. Redux Presentational Components Vs Container Component
  25. How can I dispatch function in redux?
  26. minimise the code since I am using the same code only the content in p tags changes and component AccordionHeader header changes
  27. Component won’t update when a redux state change occurs
  28. How can I wait for setState to finish before triggering a function in React?
  29. React-Redux: Should all component states be kept in Redux Store
  30. How to get simple dispatch from this.props using connect w/ Redux?

Leave a Comment