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

Question

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

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

Answer 1

使用包装的操作创建对象dispatch,并将对象设置为属性window:

1. 将所有操作导入为一个对象,或使用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...
   };
   

2. 使用disprap包装动作bindActionCreators,并将它们分配给以下属性window:

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

3. 使用以下命令从iframe调用您的操作:

   top.reduxActions.actionA(15);