时间戳

首页 > 解决方案 > 使用 Redux Store 作为全局状态的 React 组件可重用性问题

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

问题描述

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

标签： reduxreact-reduxreusabilityreact-componentcode-reuse

解决方案

对于这里遇到同样问题的任何人，在我看来，有许多图书馆试图以过于复杂的方式解决这个问题。解决此问题的最简洁和最简单的方法是将命名空间标识符与 redux 存储中组件的每个实例相关联。我找到的最佳答案在这里：在同一页面/路由上拥有相同可重用 redux 反应组件的多个实例

祝你好运！

推荐阅读