antd Modal with Redux.md

modalReducers.js

import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  isModalOpen: false,
  currentModal: ''
};

const modalSlice = createSlice({
  name: "modal",
  initialState,
  reducers: {
    setIsModalOpen: (state, action) => {
      state.isModalOpen = action.payload;
    },
    setCurrentModal: (state, action) => {
        state.currentModal = action.payload;
    }
  },
});

export const { setIsModalOpen, setCurrentModal } = modalSlice.actions;
export default modalSlice.reducer;

ModalContainer

import React from 'react';
// Import Components
import { Button, Space } from 'antd';

// Import Actions & Methods
import { useDispatch, useSelector } from 'react-redux';
import { setCurrentModal, setIsModalOpen } from '../../redux/reducers/modalReducers';
import ModalOne from './ModalOne';
import ModalTwo from './ModalTwo';


const ModalContainer = () => {
    // States
    const dispatch = useDispatch()

    // Get Value from Redux Store
    const currentModal = useSelector(state => state?.modal?.currentModal ?? '')

    return (
        <div>
            {/* Modal 1 */}
            {currentModal === 'modal-one' && (
                <ModalOne />
            )}

            {/* Modal 2 */}
            {currentModal === 'modal-two' && (
                <ModalTwo />
            )}

            <Space size={32} style={{position: 'absolute', bottom: '100px'}}>
                <Button onClick={() => {dispatch( setCurrentModal('modal-one') ); dispatch( setIsModalOpen(true) )}}>Modal One</Button>
                <Button onClick={() => {dispatch( setCurrentModal('modal-two') ); dispatch( setIsModalOpen(true) )}}>Modal Two</Button>
            </Space>
        </div>
    );
};

export default ModalContainer;

ModalOne

import { Modal } from 'antd';
import React from 'react';

// Import Actions & Methods
import { useDispatch, useSelector } from 'react-redux';
import { setCurrentModal, setIsModalOpen } from '../../redux/reducers/modalReducers';

const ModalOne = () => {

    // States
    const dispatch = useDispatch()

    // Get Value from Redux Store
    const isModalOpen = useSelector(state => state?.modal?.isModalOpen ?? false)

    // Handle Cancel
    const _handleCancel = () => {
        dispatch( setCurrentModal('') )
        dispatch( setIsModalOpen(false) )
        
    }

    // Handle Ok
    const _handleOk = () => {
        // Do something
        dispatch( setCurrentModal('') )
        dispatch( setIsModalOpen(false) )
    }    

    return (
        <Modal style={{position: 'absolute', left:'100px'}} mask='false' onCancel={_handleCancel} onOk={_handleOk} open={isModalOpen}>
            <h2>Modal One</h2>
        </Modal>
    );
};

export default ModalOne;