javascript - Using React Hooks useReducer, how can I update an object by ID efficiently? - Stack Overflow

admin管理员组

文章数量:1421751

I have a StackBlitz that you can fork, I found a similar answer but I'm having trouble applying it to my example, I think it's because I have an array of objects.

I have the code working but it's very verbose, and I would like something easier to read that others who use Redux will recognize.

const initialState = [];
const todoReducer = (state, action) => {
  switch (action.type) {
    case 'ADD_TODO': {
      return [...state, {
        id: state.length,
        name: action.name,
        plete: false
      }];
    }
    case 'TOGGLE_COMPLETE': {
      let left = state.filter((_, index) => index < action.index)
      let right = state.filter((_, index) => index > action.index)
      let pleted = state.filter((_, index) => index == action.index)
      let updatedItem = {
        id: pleted[0].id,
        name: pleted[0].name,
        plete: !pleted[0]plete
      }
      return [...left, updatedItem, ...right];
    }
    case 'CLEAR': {
      return initialState;
    }
    default: {
      return state;
    };
  }
}

I feel like the answer is is similar to this one? Update array object in React Redux reducer

In the answer I cited above, his object has state.posts How can I update my example to be more like this one?

How can I target my Todos if I don't have a similar state object as I can't do something like:

state.todosplete = false.

I want to write a better reducer for the 'COMPLETE' action. Do I need to modify how my state is structured, ie dopes it need to be an empty object instead of an array of objects?

I have a StackBlitz that you can fork, I found a similar answer but I'm having trouble applying it to my example, I think it's because I have an array of objects.

I have the code working but it's very verbose, and I would like something easier to read that others who use Redux will recognize.

const initialState = [];
const todoReducer = (state, action) => {
  switch (action.type) {
    case 'ADD_TODO': {
      return [...state, {
        id: state.length,
        name: action.name,
        plete: false
      }];
    }
    case 'TOGGLE_COMPLETE': {
      let left = state.filter((_, index) => index < action.index)
      let right = state.filter((_, index) => index > action.index)
      let pleted = state.filter((_, index) => index == action.index)
      let updatedItem = {
        id: pleted[0].id,
        name: pleted[0].name,
        plete: !pleted[0].plete
      }
      return [...left, updatedItem, ...right];
    }
    case 'CLEAR': {
      return initialState;
    }
    default: {
      return state;
    };
  }
}

I feel like the answer is is similar to this one? Update array object in React Redux reducer

In the answer I cited above, his object has state.posts How can I update my example to be more like this one?

How can I target my Todos if I don't have a similar state object as I can't do something like:

state.todos.plete = false.

I want to write a better reducer for the 'COMPLETE' action. Do I need to modify how my state is structured, ie dopes it need to be an empty object instead of an array of objects?

• javascript
• reactjs
• redux
• react-hooks

Share Improve this question Follow edited Dec 19, 2018 at 6:54 Eric Bishard asked Dec 19, 2018 at 6:36 Eric BishardEric Bishard 5,37177 gold badges5353 silver badges7676 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

Just map:

case 'TOGGLE_COMPLETE': {
  return state.map((item, i) => i === action.index 
    ? {...item, plete: !item.plete}
    : item
  )
}

You can conditionally update "plete" without iterating multiple times.

本文标签：