Question

我正在迭代地重建遗留系统以使用React / Redux。它在大多数情况下都很好用！我现在面临的一个大问题是，旧系统有很多嵌套的iframe，它们会使用top.functionName（）与应用程序的其余部分进行通信。由于我不能一次重建所有内容，我需要编写某种接口，通过top.functionName（）与我的Redux商店进行通信。

我知道我可以使用$ r.store.dispatch直接向reducers发送一个动作，但我真的很想直接使用我的动作创建者。有没有办法实现这个目标？

Answer 1

使用dispatch包装的操作创建一个对象，并将该对象设置为window上的属性：

将您的所有操作导入为一个对象，或使用spread或Object#assign将它们全部合并到一个对象。

//import * as actionCreators1 from actionCreators1
//import * as actionCreators2 from actionCreators2
//import * as actionCreators3 from actionCreators3

const actionCreators = { ...actionCreators1, ...actionCreators2, ...actionCreators3, etc... };

动作'对象应该是这样的

const actionCreators = {
    actionA: (payload) => ({ type: 'actionA', payload }),
    actionB: (payload) => ({ type: 'actionB', payload }),
    // etc...
};

使用bindActionCreators通过发送方式处理操作，并将其分配到window上的媒体资源：

const demoStore = createStore(reducer);

window.reduxActions = bindActionCreators(actionCreators, demoStore.dispatch);

使用以下方法从iframe调用您的操作：
```
top.reduxActions.actionA(15);
```

有没有办法在使用我的动作创建者时从全球Vanilla JS功能与我的Redux商店进行通信？

1 个答案: