javascript - 使用 React/Redux 在公里和英里之间普遍切换

Question

目前，我有一个切换三元表达式的按钮并且它正在工作，但我无法想象为我要显示数据的每一行创建一个单独的三元表达式是最佳实践。

有没有更好的方法可以在整个页面上更改公里和英里？我的 redux 商店包含相同距离的两个版本，这是我目前所拥有的:

const YourDistance = ({distanceInKms, distanceInMiles}) => {
const [isToggled, setToggled] = useState(false)

return (
    <div>
        { isToggled ? <h2>{distanceInKms}</h2> : <h2>{distanceInMiles}</h2> }
        <button onClick={() => setToggled(!isToggled)}>Convert</button>
    </div>
)};

如果有人有任何想法，我将不胜感激。

Answer 1

您可以将单元存储在 redux 状态中。这样您就可以拥有一个选择器函数，该函数根据州内的距离和州内的单位返回适当的值。您可以在任何地方调用 const distance = useSelector(selectDistance)。

选择器可能类似于:

const selectDistance = (state) => {
  const units = state.units;
  const {distanceInKms, distanceInMiles} = state.distance;
  return units === "miles" ? distanceInMiles : distanceInKms;
}

所以我们仍然有一个三元组，但现在它只是在一个地方而不是到处都是。

显然，您需要发送一个 Action 来切换单位。