如何为Redux模态组件中的按钮分配特定的模态？

gr8qqesn 于 2023-03-18 发布在其他

关注(0)|答案(1)|浏览(131)

我用Redux和Redux工具包构建了一个模态组件。
初始状态：

const initialsState = { isOpen: false };

export default initialState;

切片：

const modalSlice = createSlice({
  name: "modal",
  initialState,
  reducers: {
    setIsOpen: (state, action) => {
      state.isOpen = action.payload;
    }
  }
})

export const { setIsOpen } = modalSlice.actions;
export default modalSliuce.reducer;

选择器：

const modal = (state: RootState) => state.modal;

export const modalSelector = createSelector(
  modal,
  (state) => state.isOpen
);

模态组件本身相当简单。只是一个固定的div，有一个背景和作为 prop 的子元素。
我需要在不同内容的多个案例中使用相同的模态组件，但我不确定如何将每个按钮与正确的模态关联起来。当我单击一个按钮时，它总是打开第一个模态，而不是与该按钮关联的模态。我如何确保每个按钮都打开预期的模态？

redux

来源：https://stackoverflow.com/questions/75710289/how-to-assign-specific-modal-to-buttons-in-a-redux-modal-component

1条答案

按热度按时间

4sup72z81#

代替所有模态引用的单个布尔状态值，您应该为任何被切换的模态引用存储离散状态。
示例：
模态切片

export const initialsState = {
  isOpen: {}
};

const modalSlice = createSlice({
  name: "modal",
  initialState,
  reducers: {
    setIsOpen: (state, action) => {
      state.isOpen[action.payload.id] = action.payload.isOpen;
    }
  }
})

export const { setIsOpen } = modalSlice.actions;

export default modalSlice.reducer;

选择器
更新/修改选择器以接受一个额外的参数，在本例中为模态id值。

const modalSelector = (state: RootState) => state.modal;

const isOpenSelector = createSelector(
  [modalSelector],
  (modal) => modal.isOpen,
);

export const modalIsOpenSelector = createSelector(
  [isOpenSelector, (state, id) => id],
  (isOpen, id) => isOpen[id]
);

要切换特定模态的isOpen值，请使用模态ID和打开状态来调度setIsOpen操作。
一个二个一个一个
要打开一个特定的模态，请使用更新/修改的modalIsOpenSelector函数并传入模态id参数。

const isOpen = useSelector(state => modalIsOpenSelector(state, "modalA"));

赞(0）回复(0）举报 2023-03-18

我来回答

如何为Redux模态组件中的按钮分配特定的模态？

1条答案

相关问题

热门标签

最新问答