Как спроектировать контейнер с множеством сеток / таблиц и повторно используемым редуктором в реакции? - PullRequest
Новая
       7

Как спроектировать контейнер с множеством сеток / таблиц и повторно используемым редуктором в реакции?

0 голосов
/ 26 ноября 2018

В одном контейнере будет отображаться множество таблиц.

Следовательно, я разрабатываю редуксы и саги для обработки только выборочных данных.

Я бы отлично работал в одной таблице,Я чувствую растерянность, когда хочу иметь более одной таблицы в контейнере.

в таблице Saga: 

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

в таблице редуктор: 

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 в редуктор.

Должен ли я хранить данные таблицы в локальном состоянии контейнера?

Если ture, как напрямую обновить локальное состояние из саги?

В противном случае,

я должен использовать избыточное подпространство для решения этой проблемы?

Пожалуйста, не стесняйтесь обращаться ко мне, если у вас есть какие-либо вопросы

...