Question

我有一个多页反应应用程序，其中一个端点必须以表格形式显示数据。显示我对该端点的GET_INFO采取了componentWillMount的操作。现在，我有一个称为table_info的化简器，其中包含table_data数组和shouldTableUpdate布尔值。

我的表格可以在每行中使用edit和delete图标进行编辑。我在update上遇到了问题，在update上我用动作UPDATE_TABLE_ROW调用了reducer，如果成功，我将执行以下操作：

//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}
    }
}

您能告诉我如何使用redux saga有效地处理表的更新，删除，添加吗？在谷歌搜索中，我仅获得了一些幼稚的示例，于是来到了。

注意：无法显示用于我公司项目的实际代码。抱歉。

谢谢。

Answer 1

您能告诉我如何有效地使用redux saga处理更新，删除和添加表格吗？

好吧，您只能使用化简器简单地操作state对象。

评论：

table_data是一个列表，而不是对象。
我认为您不需要shouldTableUpdate，因为如果状态字段映射在mapStateToProps中，则商店中的状态更改将触发组件更新。

所以这是通过reducer添加，更新和删除项目的基本模板。

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;
  }
}

如何在可编辑表中有效使用Redux传奇

1 个答案: