Nsryjdtyk

In a single container, it would display a lot of tables.

Hence, i design a redux and saga for handling fetching data only.

I would work fine in a single table. I feel confuse, when i want to have more than one table in a container.

In Table Saga:

export function* getTableSaga(action) {    

    .............

    const response = yield axios.post(action.url, action.body, headers);

    yield put(actions.getTableSuccess(response.data));    

}

In Table reducer:

const initialState = {

  tableData: null,

  error: null,

  loading: true,

};

In container A:

It is fine, when i only have a single table.

   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)),

  };

};

If i want to show a number of tables, i don't know how to develop a good structure.

I would want to learn how to deign a good reducer and a container.

I try to design a better method. Please give me some option.

In container:

 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>

        );

      }

    }

I create a of pair state(row and column) for each table. I would remove the tableData into the reducer.

Should i store the table data into local container state?

If ture, how to update the local state from saga directly?

Otherwise,

should i use redux-subspace to solve this problem?

Please feel free to contact me if you have any questions