如何正确编写 Redux ReactJS 模态组件？

【问题标题】：How to write a Redux ReactJS modal component correctly?如何正确编写 Redux ReactJS 模态组件？
【发布时间】：2021-08-27 11:16:22
【问题描述】：

在一个页面上，我使用 2 个或多个具有不同内容的模态。现在对于每个模态窗口，我创建一个存储 isOpen: true / false 的减速器。这是一个正常的解决方案吗？让我感到困惑的是，我必须为应用程序中的新模式窗口创建一个减速器。

我当然想只使用 1 个减速器，这样我就可以重用模态窗口组件。当模态窗口打开时，我遇到了一个问题，其余部分也随之打开。

【问题讨论】：

也许您可以提供一个可运行的示例来演示该问题，并具体说明该示例中的哪些内容未按预期工作？

标签： reactjs redux components

【解决方案1】：

没有示例代码很难提供帮助。但是根据您的描述，您似乎需要两种状态。 isOpenModal1 和 isOpenModal2。您可以像这样将它们组合在一个减速器中：

import { createStore } from 'redux';
const rootReducer = (state,action)=>{
    switch(action.type){
        case 'OPEN_MODAL_1':
            return {...state, isOpenModal1:true}
        case 'CLOSE_MODAL_1':
            return {...state, isOpenModal1:false}
        case 'OPEN_MODAL_2':
            return {...state, isOpenModal2:true}
        case 'OPEN_MODAL_2':
            return {...state, isOpenModal2:false}
        default:
            return state
     }
}

const initState = {
    isOpenModal1: false,
    isOpenModal2: false
}
const store = createStore(rootReducer,initState);
export default store;

当您需要关闭/打开模式时，您可以使用 useDispatch：

const Open1 = () => { dispatch({ type: "OPEN_MODAL_1" }) };

【讨论】：