Tuesday 17 July 2018

Reactjs/Redux Edit functionality not working

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 enter image description here
If I edit the first item then state is like this
enter image description here
My feedbacklist is repeating edited feedback. I don't know where i am doing wrong.
Here is my database enter image description here
Here is the working code:
https://codesandbox.io/s/github/montygoldy/employee-review/tree/master/client
login: montyjatt@gmail.com password: 12345678


from Reactjs/Redux Edit functionality not working

No comments:

Post a Comment