使用 useState 和 useEffect 过滤处于状态的项目列表中的项目

Question

我的应用程序上有一个项目列表，我正在尝试为每个单击创建一个详细信息页面。此外，我没有管理如何使用 useState 和 useEffect 使用 typescript，我可以只使用 componentDidMount 来管理，这不是我的目标。

在我的州，称为MetricState，我有"metrics"，我在某些地方看到我也应该在我的州添加"selectedMetric"。我认为这是一个奇怪的解决方案，因为我只想能够通过“在处于状态的指标列表上选择 id x 的指标”的操作来调用调度。

这是代码框，当您单击“详细信息”按钮时，您会看到未打印来自该州的所选指标的名称：https://codesandbox.io/s/react-listing-forked-6sd99

这是我的州：

export type MetricState = {
  metrics: IMetric[];
};

调度调用的我的 actionCreators.js 文件

export function fetchMetric(catalog, metricId) {
  const action = {
    type: ACTION_TYPES.CHOOSE_METRIC,
    payload: []
  };
  return fetchMetricCall(action, catalog, metricId);
}

const fetchMetricCall = (action, catalog, metricId) => async (dispatch) => {
  dispatch({
    type: action.type,
    payload: { metrics: [catalog.metrics.filter((x) => x.name === metricId)] } //contains the data to be passed to reducer
  });
};

最后是 MetricsDeatail.tsx 页面，我尝试使用来自路由参数的 id 过滤所选项目：

const metricId = props.match.params.metricId;
  const catalog = useSelector<RootState, MetricState>(
    (state) => state.fetchMetrics
  );

  const selectedMetric: IMetric = {
    name: "",
    owner: { team: "" }
  };
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(appReducer.actionCreators.fetchMetric(catalog, metricId));
  }, []);

Answer 1

在我的状态，称为 MetricState，我有“指标”，我在某些地方看到我也应该在我的状态中添加一个“selectedMetric”。我认为这是一个奇怪的解决方案，因为我只想能够通过“在状态上的指标列表上选择 id x 的指标”的操作来调用调度。

我同意你的看法。 metricId 来自通过props 的 URL，因此它也不需要处于状态。您希望每条数据都有一个“单一事实来源”。

为了使用这种设计模式，您的 Redux 商店需要能够：

• 根据 ID 获取并存储单个指标。
• 按 id 从商店中选择一个选择指标。

我通常发现使用键控对象状态 (Record<string, IMetric>) 更容易，但 array 也可以。

您的组件应如下所示：

const MetricDetailsPage: React.FC<MatchProps> = (props) => {
  const metricId = props.match.params.metricId;

  // just select the one metric that we want
  // it might be undefined initially
  const selectedMetric = useSelector<RootState, IMetric | undefined>(
    (state) => state.fetchMetrics.metrics.find(metric => metric.name === metricId )
  );

  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(appReducer.actionCreators.fetchMetric(metricId));
  }, []);

  return (
    <div>
      <Link to={`/`}>Go back to main page</Link>
      Here should print the name of the selected metric:{" "}
      <strong>{selectedMetric?.name}</strong>
    </div>
  );
};

export default MetricDetailsPage;

但是您应该重新设计您的动作创建者，这样您就不会在组件中选择整个catalog，然后将其作为参数传递给动作创建者。