Как эффективно использовать Redx Saga в редактируемой таблице

Question

У меня есть приложение для многостраничной реакции, в котором одна конечная точка должна отображать данные в табличной форме.Покажите, я принимаю GET_INFO действие на componentWillMount этой конечной точки.Теперь у меня есть редуктор с именем table_info, в котором есть массив table_data и логический shouldTableUpdate.

Моя таблица редактируется с иконками edit и delete в каждой строке.Я сталкиваюсь с проблемой в update, в update я вызываю редуктор с действием UPDATE_TABLE_ROW, и в случае успеха я делаю что-то вроде следующего:

//reducer.js

const initialState = {
    table_data:{}, shouldTableUpdate:false;
}
export default function myReducer(state=initialState, action){
    switch(action.type){
        case UPDATE_SUCCESS:
            // how to handle edited row here?
            // also when I print my state of this reducer
            // state becomes nested, so if one does lots of updates
            // it will be become very heavy... 
            return {...state, shouldTableUpdate:true}
    }
}

Можете ли вы рассказать, как обрабатывать обновления, удалять,добавить на стол с помощью Redx сага эффективно?При поиске в Google я получаю только наивные примеры, поэтому пришел к SO.

Примечание: не могу показать реальный код, так как он для проекта моей компании.Извините за это.

Спасибо.

Answer 1

Можете ли вы рассказать, как эффективно обрабатывать обновление, удаление, добавление в таблицу с помощью примитивной саги?

Что ж, вы можете просто манипулировать объектом state, используя только редуктор.

Комментарии:

1. table_data - это список, а не объект.
2. Не думаю, что вам понадобится shouldTableUpdate поскольку изменение состояния в хранилище вызовет обновление компонента, если поле состояния отображается в mapStateToProps.

Итак, вот базовый шаблон добавления, обновления и удаления элементов через редуктор.

const initialState = {
  table_data: [],
};

export default function myReducer(state=initialState, action){
  switch(action.type) {
    case ADD_ITEM:
      return {
        ...state,
        table_data: [
          ...state.table_data,
          action.item, // item to be added
        ]
      };
    case UPDATE_ITEM: 
      let updatedItem = action.item;
      // do something with updatedItem
      return {
        ...state,
        table_data: table_data.map(e => (
          e.id === updatedItem.id ? updatedItem : e
        )),
      };
    case DELETE_ITEM:
      const index = state.table_data.findIndex(e => e.id === action.item.id);
      const numItems = state.table_data.length;
      return {
        ...state,
        table_data: [
          // exclude index
          ...table_data.slice(0, index),
          ...table_data.slice(index+1, numItems),
        ]
      };
    default:
      return state;
  }
}