使用 Redux Store 作为全局状态的 React 组件可重用性问题答案

【问题标题】：Problems with React Component Reusability with Redux Store as Global State使用 Redux Store 作为全局状态的 React 组件可重用性问题
【发布时间】：2021-03-16 20:21:23
【问题描述】：

我在我的 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。

【问题讨论】：

标签： redux react-redux reusability react-component code-reuse

【解决方案1】：

对于遇到相同问题的任何人，我认为有许多库试图以过于复杂的方式解决这个问题。解决该问题的最简洁和最简单的方法是将命名空间标识符与 redux 存储中组件的每个实例相关联。我找到的最佳答案在这里：having multiple instance of same reusable redux react components on the same page/route

祝你好运！

【讨论】：