Reactjs 使用react、redux和promise实现确认组件

我尝试用redux和原生promise构建一个通用的confirm组件。我在这里读了丹·阿布拉莫夫的解决方案：但我正在寻找一种更通用的方法。 基本上我想这样做：

确认({
键入：“警告”，
标题：“你确定吗？”，
描述：“是否要执行此操作？”，
confirmLabel:'是'，
abortLabel:“中止”
})
.然后（（）=>{
//在承诺解决后做点什么
})

确认方法基本上打开模式并返回承诺。在promise中，我订阅我的redux存储，监听状态更改并解决或拒绝该承诺：

export const confirm=功能（设置）{
//首先发送带有给定道具的openConfirmModal
仓库调度(
openConfirmModal({
…设置
})
);
//返回订阅redux存储的承诺
//见：http://redux.js.org/docs/api/Store.html#subscribe
//状态更改时检查是否已解决/已拒绝
//如果解决或拒绝：
//-调度关闭确认模式
//-决定或拒绝承诺
//-取消订阅存储
返回新承诺（（解决、拒绝）=>{
函数handleStateChange（）{
让newState=store.getState（）；
if（newState.confirmModal.resolved）{
store.dispatch（closeConfirmModal（））；
解决（）；
取消订阅（）；
}
if（newState.confirmModal.rejected）{
store.dispatch（closeConfirmModal（））；
拒绝（）；
取消订阅（）；
}
}
让unsubscribe=store.subscribe（handleStateChange）；
})
}

“我的确认”组件已连接到redux应用商店，并在某种布局组件中包含一次，因此它可用于应用程序中的所有路由：

类ConfirmModal扩展组件{
建造师（道具）{
超级（道具）
}
确认{
this.props.dispatch（resolveConfirmModal（））；
}
中止{
this.props.dispatch（rejectConfirmModal（））；
}
render（）{
//我的模态窗口
}
}
导出默认连接(
状态=>({
confirmModal:state.confirmModal
})
)（确认模式）；

减速器/动作如下所示：

导出常量openConfirmModal=（设置）=>{ 返回{ 键入：“打开\确认\模式”， 设置 }; }; 导出常量resolveConfirmModal=（）=>{ 返回{ 类型：“解析\确认\模式” }; }; 导出常量rejectConfirmModal=（）=>{ 返回{ 类型：“拒绝\确认\模式” }; }; 导出常量closeConfirmModal=（）=>{ 返回{ 类型：“关闭\确认\模式” }; }; 常量初始状态={ 开：错， 键入：“info”， 标题：“你确定吗？”， 描述：“您确定要执行此操作吗？”， confirmLabel:'是'， abortLabel:'Abort'， }; 导出常量ConfirmModalReducer=（状态=初始状态，操作）=>{ 开关（动作类型）{ “打开确认模式”案例： 返回{…action.settings，open:true}； 案例“解决\确认\模式”： 返回{…状态，已解析：true}； “拒绝确认模式”案例： 返回{…状态，已拒绝：true}； 案例“关闭确认模式”： 返回初始状态； 违约： 返回状态； } }; redux部分正在工作。我的确认窗口可以打开/关闭，并根据我的选项进行渲染。但是我如何在我的确认方法中定义一个可以在我的组件中解析的承诺呢？我怎样把一切联系起来

找到了一个有效的解决方案！ 找到了一个与我一直在寻找的解决方案：

• 模态属性由我的Redux状态驱动
• 模态组件只包含一次，它位于我的 应用程序不作为不同的渲染应用程序，如 在这里：
• confirm方法返回的本机承诺是 已解决/被拒绝，由Redux状态驱动

---

你觉得怎么样？

好吧，你可以做，但不会很漂亮。基本上，您需要在

confirm（）旁边有一张未兑现承诺的地图：

后来：

case 'CLOSE_CONFIRM_MODAL':
    let resolve = outstandingModals[state.confirmationId];
    if (resolve) {
        resolve();
        delete outstandingModals[state.confirmationId];
    }
    return initialState;

就像我说的-丑陋。我不认为你能用承诺做得比这更好

但不使用承诺可以做得更好。我只需在必要时呈现确认组件，例如：

render() {
    return <div>
       ... My stuff ...
        {confirmationNecessary && <Confirm text='Are you sure?' onAction={this.thenConfirmed}/>}
       </div>
}

render（）{
返回
…我的东西。。。
{必要的确认&&}
}

confirmationnequired
可以来自
this.state
或商店。
我写了一篇博客文章，讨论了管理类似这样的“通用”模态的一种可能方法：

基本思想是，请求模态的代码可以包含一个预先编写的动作作为道具，模态可以在动作关闭后发送该动作

还有一个有趣的库，它似乎通过中间件实现模式结果承诺。
可能如此：）


export const MsgBox={
确定取消：s=>
新承诺（（确定，取消）=>
确认？确定（）：取消（）），
…etc
您能否添加
closeConfirmModal（）
code please？完成。添加了操作和减速器。也许使用异步操作是更好的方法。但到目前为止，我试图在redux部分保持简单。@d-bro82是否有javascript而不是cofeescript的此示例？非常感谢。但是使用此方法，我必须将我的操作传递给我的confirm组件，并且在我想要显示确认的其他组件中包含确认组件。这是我试图避免的。我的想法是一个只包含一次的组件，并且不需要知道在确认后要做什么。基本上，这是可以的。你至少可以使用我建议的第一个选项-使用
未兑现承诺
 map。不过，我不会真的使用redux。我会实现一些自定义的东西，使用react的
上下文
属性。谢谢你，我也读过Dan Abramovs关于StackOverflow的方法。你的博客文章非常有趣，我喜欢将动作作为有效负载发送的想法。我会给它一个
render() {
    return <div>
       ... My stuff ...
        {confirmationNecessary && <Confirm text='Are you sure?' onAction={this.thenConfirmed}/>}
       </div>
}