如何重用通过 React 和 Redux 改变状态的组件

Question

我在我的 React/Redux 应用程序中遇到了可重用性难题。我编写了可重用的 React 组件，例如下拉菜单和滑块，并将状态值存储在我的 Redux Store 中。现在我明白了，只要组件的任何 JSX 实例更改状态，该组件的所有其他实例也会更改状态。他们都开始互相模仿，而我需要他们独立运作。我还想在组件的不同实例中以不同的方式初始化状态，但想不出办法来做到这一点。例如，对于一个滑块，我希望滑块范围的开始值和结束值在组件的不同实例中是不同的。通过 React 的普通 props 系统很容易做到这一点，但我对如何通过 Redux 做到这一点感到困惑。

我对此进行了一些研究，似乎解决方案是为 Redux 存储中组件的每个实例添加唯一 ID。但我需要详细说明在哪里添加 ID（reducer？动作创建者？组件？）以及如何让所有内容流动，以便正确的组件改变其状态。

这是我的减速器：

    const INITIAL_STATE = {
      slots: 100, 
      step: 5,
      start: 35,
      end: 55,
    };

const sliderReducer = (state=INITIAL_STATE, action ) => {
    switch (action.type) {
      case "MIN_SELECTED":
        console.log("Min Selected");
        return {
          ...state,
          start: action.payload
        };
      case "MAX_SELECTED":
        console.log("Max Selected");
        return {
          ...state,
          end: action.payload
        };
      default:
          return state;
    }
}

export default sliderReducer;

这是我的动作创建者：

//Slider Minimum Value Selection Action Creator
export const selectMinValue = (value) => {
  return (dispatch) => {
    dispatch({
      type: "MIN_SELECTED",
      payload: value
    });
  };
};

//Slider Maximum Value Selection Action Creator
export const selectMaxValue = (value) => {
  return (dispatch) => {
    dispatch({
      type: "MAX_SELECTED",
      payload: value
    });
  };
};

组件代码太长无法粘贴，但它本质上是 onDrag 事件的事件处理程序和滑块的 JSX。

Answer 1

您可以给每个实例一个唯一的 ID。这将允许您将 id 传递给 redux 存储，您可以在其中保存一个对象或数组，该对象或数组将根据唯一键存储每个实例的数据。你可以持有另一个处理唯一 id 生成的 redux 变量。

例如，您可以将每个名为“id”的可重用组件的状态值初始化为“null”。在 redux 存储中，您可以有另一个“id_counter”来跟踪下一个可用 id 以分配给可重用组件。在组件初始化期间，您可以调用 redux 以检索最新的“id_counter”，然后将“id_counter”递增 1。如果“id_counter”从 0 开始，则可以拥有可以访问从零开始的数组的 id。因此，您可以在 redux 存储中拥有另一个项目“数据”，这是一个随着添加的每个新 id 增长的数组。这个“数据”变量可以保存每个可重用组件的数据。