ecmascript-6 - 如何将 thunk 或回调函数传递到 redux 操作中。在 redux 存储中序列化函数以获取模态和 toast 确认通知

Question

当使用带有确认按钮的通用模态或 toast 时，能够将操作传递到此组件会变得很有用，这样它就可以在您单击确认时分派(dispatch)。

Action 可能看起来像这样:

export function showConfirm({modalConfirm}) {
  return {
    type: 'MODALS/SHOW_MODAL',
    payload: {
      modalId: getUuid(),
      modalType: 'CONFIRM',
      modalConfirm : modalConfirm,
    },
  };
}

其中 modalConfirm 是另一个 Action 对象，例如:

const modalConfirm = {
  type: 'MAKE_SOME_CHANGES_AFTER_CONFIRM',
  payload: {}
}

modalConfirm 操作在模态组件内部使用 dispatch(modalConfirm) 甚至 dispatch(Object.assign({}, modalConfirm, someResultFromTheModal)

不幸的是，此解决方案仅在 modalConfirm 是一个简单的 redux 操作对象时才有效。这个系统显然非常有限。无论如何，您是否可以传递一个函数(例如 thunk)而不是一个简单的对象？

理想情况下，功能齐全的东西是这样的:

    const modalConfirm = (someResultFromTheModal) => {
      return (dispatch, getState){
        dispatch({
          type: 'MAKE_SOME_UPDATES',
          payload: someResultFromTheModal
        })
        dispatch({
          type: 'SAVE_SOME_STUFF',
          payload: http({
            method: 'POST',
            url: 'api/v1/save',
            data: getState().stuffToSave
          })
        })
      }
    }

Answer 1

有趣的是，将一个 Action 对象放入商店并将其作为 Prop 传递给通用对话框正是我自己想出的方法。实际上，我有一篇描述该想法的博文正在等待发表。

您问题的答案是“是的，但是......”。根据位于 http://redux.js.org/docs/FAQ.html#organizing-state-non-serializable 的 Redux 常见问题解答，完全有可能将不可序列化的值(例如函数)放入您的操作和存储中。但是，这通常会导致时间旅行调试无法按预期工作。如果这不是您关心的问题，那就继续吧。

另一种选择是将模态确认分成两部分。让初始模态确认仍然是一个普通的操作对象，但使用中间件来监视正在调度的那个，并从那里做额外的工作。这是 Redux-Saga 的一个很好的用例。