Question

在一个容器中，它将显示很多表。

因此，我设计了redux和saga用于仅处理获取数据。

我可以在一个表中正常工作。当我想在一个容器中有多个表时，我感到困惑。

在佐贺传奇中：

export function* getTableSaga(action) {    
    .............
    const response = yield axios.post(action.url, action.body, headers);
    yield put(actions.getTableSuccess(response.data));    
}

在Table reducer中：

const initialState = {
  tableData: null,
  error: null,
  loading: true,
};

在容器A中：

很好，当我只有一张桌子时。

   class A extends Component {
      state = {
        columns: [
         .......
        ]
      }

      componentDidMount() {              
        this.props.getTable(url, body);    //saga        
      }

      render() {                
        return (
          <Fragment>
               <Grid rows={this.props.rows} columns={this.state.columns}/>
          </Fragment>
        );
      }
    }   

const mapStateToProps = state => {
  return {
    rows: state.report.tableData
  };
};

const mapDispatchToProps = dispatch => {
  return {
    getReport: (url, body) => dispatch(actions.GetTable(url, body)),
  };
};

如果我想显示许多表格，我不知道如何开发一个好的结构。

我想学习如何设计好的减速器和容器。

我尝试设计一种更好的方法。请给我一些选择。

在容器中：

 class A extends Component {
      state = {
        columns1: [
         .......
        ],
        rows1: null,
        columns2: [
         .......
        ],
        rows2: null,
       columns3: [
         .......
        ],
        rows3: null,
      };

      componentDidMount() {              
        this.props.getTable(url1, body1);    //call saga three times. Is it right?
        this.props.getTable(url2, body2); 
        this.props.getTable(url3, body3); 
      }

      render() {                
        return (
          <Fragment>
               <Grid rows={this.state.rows1} columns={this.state.columns1}/>
               <Grid rows={this.state.rows2} columns={this.state.columns2}/>
               <Grid rows={this.state.rows3} columns={this.state.columns3}/>
          </Fragment>
        );
      }
    }

我为每个表创建一对状态（行和列）。我将tableData删除到reducer中。

我应该将表数据存储到本地容器状态吗？

如果不成功，如何直接从saga更新本地状态？

否则，

我应该使用redux-subspace解决此问题吗？

如有任何疑问，请随时与我联系

如何设计一个具有许多网格/表和可重复使用的reducer的容器？

0 个答案: