如何从后台脚本订阅redux状态更改？

Question

我正在尝试构建一个Chrome扩展程序，用户可以在其中录制语音和相机。此扩展目前使用redux在react-chrome-redux模块的帮助下存储状态，以便在后台脚本等位置访问它。

然而，我似乎无法弄清楚它是如何运作的。我的文件树基本上是这样的：

▾ requestAccess/  
  ¦ request.html  
  ¦ request.js                                 
▾ event/                        
  ▸ src/ 
  ¦ captureMedia.js                                       
▾ popup/                        
  ▸ src/                        
  ¦ ¦ index.html
  ¦ ¦ index.js
  ¦ ¦ Popup.jsx
▾ store/                        
  ▾ src/                        
  ¦ ▾ reducers/                 
  ¦ ¦ ¦ store.js                
  ¦ ¦ ¦ recordingReducer.js                                

我希望event/src/captureMedia.js文件监听redux存储中的状态更改，一旦状态从recording: false更改为recording: true，它应该能够执行代码开始录音。

我的代码结构与`react-chrome-redux＆＃39;中的this example非常相似。

Answer 1

  

我希望event/src/captureMedia.js文件能够收听状态   redux存储中的更改，一旦状态从recording: false更改为recording: true，它应该能够执行代码   开始录音。

文件无法侦听商店更改。组件可以使用react-redux中的connect() hoc。如果您按照Getting Started中的说明设置了商店，则无需额外设置来收听商店更改：

1。将代理存储添加到UI组件，例如弹出窗口

<强> popover.js

import React from 'react';
import {render} from 'react-dom';
import {Provider} from 'react-redux';
import {Store} from 'react-chrome-redux';

import TodoApp from './TodoApp';

const store = new Store({
  portName: 'MY_APP' // communication port name
});

// The store implements the same interface as Redux's store
// so you can use tools like `react-redux` no problem!
render(
  <Provider store={store}>
    <TodoApp/>
  </Provider>
  , document.getElementById('app'));

2。使用wrapStore（）

将Redux存储区包装在后台页面中

<强> background.js

import {wrapStore} from 'react-chrome-redux';

const store; // a normal Redux store

wrapStore(store, {portName: 'MY_APP'}); // make sure portName matches

就是这样！从UI组件调用的调度将找到他们到后台页面的方式没有问题。您的后台页面中的新状态将确保找到返回UI组件的路径。

3。照常连接您的组件

<强> TodoApp.js

const TodoApp = ({todos}) => (
    <ul>
        {todos.map(todo => <li key={todo.id}>{todo.title}</li>)}
    </ul>
);

function mapStateToProps(state) {
  return { todos: state.todos }
}

export default connect(mapStateToProps, actionCreators)(TodoApp);