Question

我有一个动作文件

import keyMirror from 'keymirror';

export const actionTypes = keyMirror({
 OPEN_LIGHTBOX: null,
 CLOSED_LIGHTBOX: null
});

export const openLightbox = (closable = false) => ({
 type: 'OPEN_LIGHTBOX',
 payload: {lightboxOpen: true, lightboxClosable: closable}
});

和一个reducer，因为它似乎没有必要，所以我不会将代码放在这里。它无论如何都在工作。

我有一个反应成分说

module.exports = connect((state) => {
    console.log('state change'); // eslint-disable-line no-console
    console.log(state); // eslint-disable-line no-console
    return {
      findShopDomainData: state.findShopDomain
    }
  })(Autocomplete);

我可以在react组件内部注册状态更改，获得控制台日志语句。

但是我在响应之外还有一些东西需要调用这些redux动作。因此，我导入了一个JS文件。

import { createStore } from 'redux';
import { findShopDomain } from 'path to reducer file happens here'
import { openLightbox } from  'path to action file'

然后我

let reduxStore = createStore(findShopDomain);
reduxStore.dispatch(openLightbox(true));

如果我在原始js文件中执行该操作，则会进入化简器，但状态更改永远不会在连接的React组件中注册。我猜想是因为connect函数可能将它变成了一个新的reducer，并且从本质上讲，实际上我周围有两个reducers不会互相影响。

无论如何，我真的想以某种方式拥有reduxStore.dispatch（openLightbox（true））;在我的香草js中，由我的react组件注册。

Answer 1

使用全球范围 window.store = createStore(findShopDomain); window.store.dispatch(openLightbox(true))

如何使Redux连接的React组件侦听React之外调度的动作

1 个答案: