score:0

Accepted answer

I ended up with creating web service method which calculates share amount per entity, puts this data to map and returns to react using axios and redux. Not sure if this is the best solution to my problem, but it works.

Example of my working code => reducer:

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)
  };
};

react component:

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


Related Query

More Query from same tag