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

Question

Как использовать redux и реагировать на рендеринг динамически рассчитанных данных с помощью функции из refux?Более подробно: я пытаюсь сделать таблицу с двумя столбцами (имя, доля).Имя происходит от entity.name, а доля вычисляется с использованием entity.id и удаленного сервиса.В настоящее время у меня есть динамически отображаемая таблица со строками для каждой сущности с ее именем, но я не могу передать вычисленные данные по entity.id.

Я пытался использовать для этого избыточное действие, но теперь я понимаю, что избыточное значениеaction не возвращает никакого значения, но изменяет состояния в своем хранилище.Код, который я предоставил ниже с использованием {calcShare (entity.id)}, выдает ошибку, что возвращает массив {type, payload}.Другой вариант может состоять в том, чтобы построить массив ключ / значение в избыточном хранилище и использовать его в таблице реагирования, получив значение массива, используя entity.id в качестве ключа, но я не уверен, как это сделать правильно в коде редуктора и реагирования.

Редуктор выглядит следующим образом:

export const getCalculatedShareById: IPayloadResult<String> = id => {
  const requestUrl = `${apiUrl}/${id}/calculated-share`;
  return {
    type: ACTION_TYPES.FETCH_ENTITY_CALCULATED_SHARE,
    payload: axios.get<String>(requestUrl)
  };
};

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

export class Home extends React.Component {
  componentDidMount() {
    this.props.getEntities();
  }

  render() {
    const { entitiesList, getCalculatedShareById } = this.props;
    return (
      <Row>
        <Col>
          <Table>
            <thead>
              <tr>
                <th>Name</th>
                <th>Share</th>
              </tr>
            </thead>
            <tbody>
              {entitiesList.map((entity, i) => (
                <tr key={`entity-${i}`}>
                  <td>{entity.name}</td>
                  <td>{getCalculatedShareById(entity.id)}</td>
                </tr>
              ))}
            </tbody>
          </Table>
        </Col>
      </Row>
    );
  }
}

const mapStateToProps = storeState => ({
  entitiesList: storeState.myReducer.entities
});

const mapDispatchToProps = { getEntities, getCalculatedShareById};

type StateProps = ReturnType<typeof mapStateToProps>;
type DispatchProps = typeof mapDispatchToProps;

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Home);

Пожалуйста, помогите мне понять, как лучше всего решить такиепроблема и приведите несколько примеров, если это возможно.

Answer 1

Я закончил с созданием метода веб-сервиса, который вычисляет количество акций на единицу, помещает эти данные в карту и возвращает для реагирования, используя axios и redux. Не уверен, что это лучшее решение моей проблемы, но оно работает.

Пример моего рабочего кода => Редуктор:

export const ACTION_TYPES = {
  FETCH_ENTITY_SHARE_AMOUNT: 'entity/FETCH_ENTITY_SHARE_AMOUNT'
};

const initialState = {
  loading: false,
  errorMessage: null,
  entitiesShareAmountMap: Map,
  updating: false,
  updateSuccess: false
};

export type EntityState = Readonly<typeof initialState>;

// Reducer

export default (state: EntityState = initialState, action): EntityState => {
  switch (action.type) {
    case REQUEST(ACTION_TYPES.FETCH_ENTITY_SHARE_AMOUNT):
      return {
        ...state,
        errorMessage: null,
        updateSuccess: false,
        loading: true
      };
    case FAILURE(ACTION_TYPES.FETCH_ENTITY_SHARE_AMOUNT):
      return {
        ...state,
        loading: false,
        updating: false,
        updateSuccess: false,
        errorMessage: action.payload
      };
    case SUCCESS(ACTION_TYPES.FETCH_ENTITY_SHARE_AMOUNT):
      return {
        ...state,
        loading: false,
        entitiesShareAmountMap: action.payload.data
      };
    default:
      return state;
  }
};

const apiUrl = 'api/entities';

// Actions

export const getEntitiesShareAmountMap: IPayloadResult<any> = () => {
  const requestUrl = `${apiUrl}/entities-share-amount`;
  return {
    type: ACTION_TYPES.FETCH_ENTITY_SHARE_AMOUNT,
    payload: axios.get<Map<String, String>>(requestUrl)
  };
};

Реагирующий компонент:

export class Home extends React.Component {
  componentDidMount() {
    this.props.getEntities();
    this.props.getEntitiesShareAmountMap();
  }

  render() {
    const { entitiesList, entitiesShareAmountMap } = this.props;
    return (
      <Row>
        <Col>
          <Table>
            <thead>
              <tr>
                <th>Name</th>
                <th>Share</th>
              </tr>
            </thead>
            <tbody>
              {entitiesList.map((entity, i) => (
                <tr key={`entity-${i}`}>
                  <td>{entity.name}</td>
                  <td>{entitiesShareAmountMap[lottery.id]}</td>
                </tr>
              ))}
            </tbody>
          </Table>
        </Col>
      </Row>
    );
  }
}

const mapStateToProps = storeState => ({
  entitiesList: storeState.myReducer.entities,
  entitiesShareAmountMap: storeState.myReducer.entitiesShareAmountMap
});

const mapDispatchToProps = { getEntities, getEntitiesShareAmountMap };

type StateProps = ReturnType<typeof mapStateToProps>;
type DispatchProps = typeof mapDispatchToProps;

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Home);

Answer 2

Поток должен быть таким:

1. Запустить отправку.
2. Обновить entity в состоянии через отправку в редукторе.
3. В mapStateToProps entity из состояния уже импортировано в компонент, эта переменная обновляется после того, как мы запустили наше действие (именно в редукторе).
4. После запуска отправки у нас есть доступ к измененной переменной через this.props.entityList.

В приведенном выше выполнении отсутствует редуктор, поэтому нам нужно реализовать редуктор, который принимает state и действие -> {type: x, payload: y} в качестве параметра и изменяет свойство entity состояния и возвращает измененныйstate