Реагируйте на избыточное хранилище: непонятные ошибки при передаче данных - PullRequest
Новая
       28

Реагируйте на избыточное хранилище: непонятные ошибки при передаче данных

0 голосов
/ 27 сентября 2019

Реакция + редукция + действия + неизменяемый + машинопись

В таблице вообще не отображаются данные .

  1. Запрос и ответнормальный с JSON до действия action.payload,

  2. Неизменяемое состояние с нормальной структурой данных до редуктора,

  3. Выполнение без ошибок в терминале иконсоль,

Не работает:

componentDidMount => componentWillMount X

без асинхронного / ожидающего X

Есть идеи? 

// view
  async componentDidMount() {
    await this.props.requestFlowPlans();
    await this.props.requestAdsAdvertisers();
  }
...
  render() {
    const { classes, clients, plans } = this.props;
...
  <MUIDataTable
    title='table'
    data={plans.mergeClientName(clients).items.valueSeq().toArray()}
  />
...
export const FW0100 = connect(
  (store: Store) => ({
    clients: store.flowClients,
    plans: store.flowPlans,
  }),
  ...
)(component);

export default withTheme(withStyles(styles)(FW0100));

// reducer
export const AdsAdvertisersReducer = createReducer<Store['flowClients']>(
  new AdsAdvertiserList(),
  {
    receiveAdsAdvertisers(state, action) {
      state.add(action.payload);
    }
  }
);
export const FlowPlansReducer = createReducer<Store['flowPlans']>(
  new FlowPlanList(),
  {
    receiveFlowPlans(state, action) {
      state.add(action.payload);
    }
  }
);
export const reducer = combineReducers({
  flowClients: AdsAdvertisersReducer,
  flowPlans: FlowPlansReducer,
});

// store
export interface Store {
  flowClients: any;
  flowPlans: any;
}

// immutable
export class AdsAdvertiserList extends BaseList { ...
export class FlowPlanList extends BaseList { ...

export class BaseList extends BaseListRecord {
...
  add(items = []) {
    const values = _.isArray(items) ? items : [items];
    const latestItems = values.map(value => [
      this.getKey(value),
      new this.Clazz(value),
    ]);
    return this.merge({
      items: this.items.merge(latestItems),
    });
  }
}
...