我一直在研究使用 React、Redux 和 Thunk 创建通用模式。理想情况下，我的状态如下所示：
export interface ConfirmModalState {
isOpened: boolean;
onConfirm: null | Function
}
export const initialConfirmModalState: ConfirmModalState = {
isOpened: false,
onConfirm: null
};
但是，这意味着将不可序列化的数据放入状态，这似乎是非常不鼓励的。
我读过markerikson 的great blogpost。但是，我认为建议的解决方案不适用于异步操作和 Thunk。
您建议如何解决此问题？
【问题讨论】：
标签： javascript reactjs redux react-redux redux-thunk
我实际上写了你链接的帖子，几年后我写了该帖子的扩展版本：
Practical Redux, Part 10: Managing Modals and Context Menus.
自从我写那篇文章以来，我自己实际上已经实现了这种方法的几个变体，我发现的最佳解决方案是添加一个自定义中间件，当您调度“显示模式”操作时返回一个承诺，并且当对话框关闭时，使用“返回值”解决承诺。
在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
这样你就可以在最初要求显示对话框的地方写上“确认”逻辑。
【讨论】：
<ModalParent> 组件驱动所有模态显示，并让应用程序的任何部分通过调度操作触发显示模态。您是否喜欢这种方法取决于您自己，但这是一种有效的潜在方法。
感谢markerikson 提供答案。这启发了我创建一个带有 thunk 的解决方案。请在这里给我一些反馈:) 我将在我的示例中使用 hooks 和 @reduxjs/toolkit。
这是我的ConfirmationModalreducer 的状态：
export interface confirmationModalState {
isOpened: boolean;
isConfirmed: boolean;
isCancelled: boolean;
}
export const initialConfirmationModalState: confirmationModalState = {
isOpened: false,
isConfirmed: false,
isCancelled: false,
};
这是切片（reducer 和动作的组合）：
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;
这是它的 thunk 动作：
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,
};
}
【讨论】：