Reactjs/Redux Edit functionality not working

Question

I built an app and added CRUD functionality and everything works fine except the edit functionality. The problem is when I try to edit its actually hitting the right database and updates the entry but in the react app its just force updates all the entries to particular one entry.

Update Saga :-

 function* updateFeedbackSaga(action) { try { const updateData = yield call(api.feedback.edit, action.payload); yield put(actions.updateFeedback(updateData)); console.log(updateData); } catch (err) { yield put(actions.updateFeedbackErrors(err.response.data)); } } 

Edit Reducer

 import * as actionTypes from "../Actions/types"; const initialState = { feedbacks: [], feedback: {}, loading: false }; export default (state = initialState, action) => { switch (action.type) { case actionTypes.UPDATE_FEEDBACK: return { ...state, feedbacks: state.feedbacks.map( feedback => feedback.id === action.payload.id ? action.payload : feedback ) }; default: return state; } }; 

Actions

 //Edit and update Feedback export const updateFeedbackRequest = newFeedbackData => ({ type: actionTypes.UPDATE_FEEDBACK_REQUEST, payload: newFeedbackData }); export const updateFeedback = updatedData => ({ type: actionTypes.UPDATE_FEEDBACK, payload: updatedData }); export const updateFeedbackErrors = errors => ({ type: actionTypes.GET_ERRORS, payload: errors }); 

That's how printing

 <section className = "feedback"> <div className = "employees__table" > <h4 className = "semi-heading" > Feedback Table < /h4> { FeedbackList feedbacks = {feedbacks} /> } </div> </section > const mapStateToProps = state => ({ feedbackList: selectors.FeedbackSelector(state) }); 

HERE ARE THE IMAGES

This is my feedbacklist

If I edit the first item then state is like this

My feedbacklist is repeating edited feedback. I don't know where i am doing wrong.

Here is my database

Here is the working code:

https://codesandbox.io/s/github/montygoldy/employee-review/tree/master/client

login: montyjatt@gmail.com password: 12345678

Answer 1

do you need to loop over all feedback when you already know the updated I'd?

case actionTypes.UPDATE_FEEDBACK:
 return { 
    ...state,
    feedbacks[action.payload.id]: action.payload.body
    };

This will only update a single item because the ID is part of the key. The way you have it currently the feedbacks will all be replaced by the single value that matches the ID.

If you're planning on sending multiple id's then you'll want to use the spread operator.

case actionTypes.UPDATE_FEEDBACK:
 return { 
    ...state,
    feedbacks: {
        ...state.feedbacks,    
        ...action.payload
     }
  };

In this case you're spreading out the old feedback items and then using the new payload with the spread operator to overwrite only the ones with matching id's.

Of course this means the action.payload should match your feedback structure.

Answer 2

Ok SO I have found the fix, actually, it's my id reference in the reducer was incorrect.

correct way is

 case actionTypes.UPDATE_FEEDBACK: return { ...state, feedbacks: state.feedbacks.map( feedback => feedback._id === action.payload._id ? action.payload : feedback ) };