具有Redux和Thunk的通用模态

Question

我一直在研究使用React、Redux和Thunk创建通用模态。理想情况下，我的状态如下：

export interface ConfirmModalState {
isOpened: boolean;
onConfirm: null | Function
}
export const initialConfirmModalState: ConfirmModalState = {
isOpened: false,
onConfirm: null
};

然而，这意味着将不可序列化的数据放入状态，这似乎是非常不鼓励的。

我读过马克里克森的一篇很棒的博客文章。然而，我认为所提出的解决方案不适用于异步操作和Thunk。

你建议如何解决这个问题？

Answer 1

实际上我写了你链接的帖子，几年后我写了一个扩展版的帖子：

实用Redux，第10部分：管理模式和上下文菜单。

事实上，自从我写那篇文章以来，我自己已经实现了这种方法的几个变体，我发现的最好的解决方案是添加一个自定义中间件，当你发送一个"；显示模态"；行动，并用"；返回值"；当对话框关闭时。

在https://github.com/AKolodeev/redux-promising-modals。我最终制定了自己的实施方案。我在https://gist.github.com/markerikson/8cd881db21a7d2a2011de9e317007580，中间件看起来大致如下：

export const dialogPromiseMiddleware: Middleware<DialogPromiseDispatch> = storeAPI => {
const dialogPromiseResolvers: Record<string, Resolver> = {};
return next => (action: AnyAction) => {
switch (action.type) {
// Had to resort to `toString()` here due to https://github.com/reduxjs/redux-starter-kit/issues/157
case showDialogInternal.toString(): {
next(action);
let promiseResolve: Resolver;
const dialogPromise = new Promise((resolve: Resolver) => {
promiseResolve = resolve;
});
dialogPromiseResolvers[action.payload.id] = promiseResolve!;
return dialogPromise;
}
case closeDialog.toString(): {
next(action);
const {id, values} = action.payload;
const resolver = dialogPromiseResolvers[id];
if (resolver) {
resolver(values);
}
delete dialogPromiseResolvers[id];
break;
}
default:
return next(action);
}
};
};

(注意：当我遇到一些TS语法问题时，我提出了这个要点，以使调度正确工作，所以它很可能不会100%开箱即用。RTK现在还包括一些.match()操作匹配实用程序，这在这里很有用。但是，它显示了基本方法。(

组件中的粗略用法是：

const closedPromise = dispatch(showDialog("TestDialog", {dialogNumber : counter});
const result = await closedPromise
// do something with the result

这样你就可以写出"；在"确认"时；逻辑写在要求首先显示对话框的位置。

Answer 2

感谢Markrikson提供的答案。这启发了我用thunks创建一个解决方案。请在这里给我一些反馈：(在我的示例中，我将使用hook和@reduxjs/toolkit。

这是我的ConfirmationModal减速器的状态：

export interface confirmationModalState {
isOpened: boolean;
isConfirmed: boolean;
isCancelled: boolean;
}
export const initialConfirmationModalState: confirmationModalState = {
isOpened: false,
isConfirmed: false,
isCancelled: false,
};

这是切片(减速器和动作的组合(：

import { createSlice } from '@reduxjs/toolkit';
import { initialConfirmationModalState } from './state';
const confirmationModalSlice = createSlice({
name: 'controls/confirmationModal',
initialState: initialConfirmationModalState,
reducers: {
open: state => {
state.isOpened = true;
state.isConfirmed = false;
state.isCancelled = false;
},
confirm: state => {
state.isConfirmed = true;
state.isOpened = false;
},
cancel: state => {
state.isCancelled = true;
state.isOpened = false;
},
},
});
export const confirmationModalActions = confirmationModalSlice.actions;
export default confirmationModalSlice;

这就是它的重击动作：

import { createAsyncThunk } from '@reduxjs/toolkit';
import ThunkApiConfig from '../../../types/ThunkApiConfig';
import { AppState } from '../../reducers';
import { confirmationModalActions } from './slice';
const confirmationModalThunkActions = {
open: createAsyncThunk<boolean, void, ThunkApiConfig>(
'controls/confirmationModal',
async (_, { extra, dispatch }) => {
const store = extra.store;
dispatch(confirmationModalActions.open());
return await new Promise<boolean>(resolve => {
store.subscribe(() => {
const state: AppState = store.getState();
if (state.controls.confirmationModal.isConfirmed) {
resolve(true);
}
if (state.controls.confirmationModal.isCancelled) {
resolve(false);
}
});
});
},
),
};
export default confirmationModalThunkActions;

您可以注意到它使用extra.store来执行subscribe。我们需要在创建商店时提供它：

import combinedReducers from './reducers';
import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit';
import { ThunkExtraArguments } from '../types/ThunkExtraArguments';
function createStore() {
const thunkExtraArguments = {} as ThunkExtraArguments;
const customizedMiddleware = getDefaultMiddleware({
thunk: {
extraArgument: thunkExtraArguments,
},
});
const store = configureStore({
reducer: combinedReducers,
middleware: customizedMiddleware,
});

thunkExtraArguments.store = store;
return store;
}
export default createStore();

现在，让我们创建一个钩子，允许我们调度所有上述操作：

import { useDispatch, useSelector } from 'react-redux';
import { AppState } from '../../../reducers';
import { useCallback } from 'react';
import confirmationModalThunkActions from '../thunk';
import { confirmationModalActions } from '../slice';
import { AppDispatch } from '../../../../index';
export function useConfirmationModalState() {
const dispatch: AppDispatch = useDispatch();
const { isOpened } = useSelector((state: AppState) => ({
isOpened: state.controls.confirmationModal.isOpened,
}));
const open = useCallback(() => {
return dispatch(confirmationModalThunkActions.open());
}, [dispatch]);
const confirm = useCallback(() => {
dispatch(confirmationModalActions.confirm());
}, [dispatch]);
const cancel = useCallback(() => {
dispatch(confirmationModalActions.cancel());
}, [dispatch]);
return {
open,
confirm,
cancel,
isOpened,
};
}

(不要忘记将confirm和cancel连接到模式中的按钮上(

就这样！我们现在可以发送我们的确认模式：

export function usePostControls() {
const { deleteCurrentPost } = usePostsManagement();
const { open } = useConfirmationModalState();
const handleDelete = async () => {
const { payload: isConfirmed } = await open();
if (isConfirmed) {
deleteCurrentPost();
}
};
return {
handleDelete,
};
}