如何使用react和redux在表中提供動態計算的數據

Question

如何使用 redux 和 react 使用 refux 中的函數來呈現動態計算的數據？ 更多詳細信息：我正在嘗試使用兩列（名稱、共享）呈現表。 Name 來自 entity.name 和 share 是使用 entity.id 和遠程服務計算的數據。 目前，我已經動態呈現了每個實體的行及其名稱，但我無法通過 entity.id 傳遞計算數據。

我已經嘗試使用 redux action 來做到這一點，但現在我明白 redux actions 不返回任何值，而是修改其存儲中的狀態。 我在下面使用 {calculateShare(entity.id)} 提供的代碼給出了它返回數組 {type, payload} 的錯誤。 另一種選擇可能是在 redux 存儲中構建鍵/值數組，並通過使用 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

流程應該是這樣的

1. 發射一次調度。
2. 通過reducer中的dispatch更新狀態中的entity 。
3. 在mapStateToProps來自state的entity已經導入到組件中，此變量在我們觸發操作后更新（正好在reducer中）。
4. 在我們發出調度之后，我們可以通過this.props.entityList訪問修改后的變量。

上面執行中缺少的是reducer，所以我們需要實現一個reducer，它接受state和action - > {type: x, payload: y}作為參數並修改state的entity屬性並返回修改后的state

Answer 2

我最終創建了Web服務方法，該方法計算每個實體的份額，將此數據放入映射並返回使用axios和redux進行反應。 不確定這是否是我問題的最佳解決方案，但它確實有效。

我的工作代碼示例=> 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)
  };
};

反應成分：

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