有没有办法用 Redux 制作带有动作按钮的可重用模式？

Question

我在模态中有一条对话框消息，如果尝试导航到另一个屏幕而不保存，则要求用户保存更改。

它有 3 个按钮（ Save 、 Proceed without Saving和Close ）。 显然，模式窗口在所有屏幕上看起来都完全相同，但Save and Go back without Saving根据屏幕执行不同的操作。

我尝试为模态创建一个单独的 Redux reducer，但我了解到您不允许在 Redux 中存储函数。

所以我的问题是，在 UI 方面具有相同模态但在它们执行的操作方面不同的情况下，推荐的方法是什么？

我真的希望在根级别拥有它，这样我就可以分派一个动作，而不必费心将模态导入每个组件并控制其在组件内的状态。

这是我最初计划发送以显示模态的操作示例

        showModal: (state, { payload }) => {
            state.modal.isOpen = true;
            state.modal.header = payload.header;
            state.modal.title = payload.title;
            state.modal.btnText1 = payload.btnText1;
            state.modal.btnText2 = payload.btnText2;
            state.modal.btnText3 = payload.btnText3;
            state.modal.btnAction1 = payload.btnAction1;
            state.modal.btnAction2 = payload.btnAction2;
            state.modal.btnAction3 = payload.btnAction3;
        }

Answer 1

我会创建一个“包装器”组件，如PageWithConfirmModal ，并在每个页面组件中使用它：

const MyCurrentPage = function( props ){

  return <PageWithConfirmModal
    showModal= { props.showModal }
    save=      { props.callSpecificSaveAction }
    proceed=   { props.callSpecificProceedAction }
    close=     { props.callSpecificCloseAction }
  >
    ... page content ...
  </PageWithConfirmModal>;
} 

这取决于你的payload.btnAction1等来自哪里，但你会弄清楚如何调整我的例子，我猜。

或者，根据您的情况，有几种可能的变体，例如传递一些描述要做什么而不是动作的属性，并决定在PageWithConfirmModal或模态内部使用哪个动作，例如：

const MyCurrentPage = function( props ){

  return <PageWithConfirmModal
    showModal= { props.showModal }
    whatToDo=  { DO_ACTIONS_FROM_MAIN_PAGE }
  >
    ... page content ...
  </PageWithConfirmModal>;
} 

// e.g. inside PageWithConfirmModal.jsx
let actions;
if( DO_ACTIONS_FROM_MAIN_PAGE ){
  actions = {
    save:    callSpecificSaveAction,
    proceed: callSpecificProceedAction,
    close:   callSpecificCloseAction,
  }
} else if( ...