冗余-THUNK 调度事件

Question

一些前言，请参阅这篇文章，了解我如何实现条形码扫描仪。长话短说，当扫描条形码时，它会在jQuery中触发一个事件，这允许我在组件中执行以下操作：

class EmployeeScreen extends Component {
componentDidMount() {
$(window).on('barcodeScan', (e) => {
if ( e.state.type !== 'E' ) {
alert('Please scan your employee badge');
} else {
this.setState({
badge: e.state.code
});
}
});
}
}

这很好，因为我能够在这个特定组件上检查员工徽章并显示错误。现在，我正在切换到 redux 样式，我很难弄清楚解决这个问题的最佳方法。我认为最好的开始方法是使用 redux-thunk 启动一个BARCODE_READ操作：

dispatch({
type: BARCODE_READ,
event: {
type: this.barcodeRead.substr(0, 1),
code: this.barcodeRead.substr(1),
}
}));

问题是，我的应用程序中的多个化简器需要侦听BARCODE_READ，并执行不同的操作。例如，假设我有以下屏幕：

员工

• 屏幕：使用徽章条形码获取员工信息(名字/姓氏)并显示在页面上。
• 主管屏幕：使用徽章条形码，获取在用户手下工作的员工，并显示在页面上。

由于此操作是我的全局应用操作的一部分，因此我不确定如何将其应用于单个屏幕操作。一种方法是从我的员工减少器调度操作，但我读到这是一种反模式：

const reducer = (state = initialState, action) => {
switch (action.type) {
case BARCODE_READ:
if (action.event.type === 'E') {
dispatch({type: 'FETCH_EMPLOYEE_RECORD'});
}
return state;
case FETCH_EMPLOYEE_SUCCESS:
return {
...state,
employee: action.employee,
};
default: {
return state;
}
}
};

我的主管化简员可以派FETCH_SUPERVSIOR_RECORD，视图应该相应地处理/更新。因为这是一种反模式(而且我无法访问从化简器调度的事实)，推荐的方法是什么？

Answer 1

这种情况是为像Redux-Observable这样的副作用处理中间件量身定制的。

您的化简器应该做的只是执行操作并返回状态的新副本。

任何时候你与外部服务(例如REST API，数据库)交互或执行长时间运行的工作时，你都希望在化简器之外完成。 您可以从组件调度自定义操作，并让"史诗"(Redux 可观察处理程序)侦听该操作。

另一个类似的库是Redux-Saga，两者基本上做同样的事情。

Answer 2

化简器不应该触发新动作是正确的。化简器应该只改变应用程序的状态，没有其他副作用。

处理此问题的正确方法是在您的操作创建器中。由于您使用的是 redux thunk，我猜您的条形码读取动作创建器如下所示：

function barcodeRead() {
return dispatch => {
dispatch({
type: BARCODE_READ,
event: {
type: this.barcodeRead.substr(0, 1),
code: this.barcodeRead.substr(1),
}
}));
};
}

这是执行业务逻辑的地方！下面是一些关于新操作创建者外观的伪代码：

function barcodeRead() {
return dispatch => {
dispatch({
type: BARCODE_READ,
event: {
type: this.barcodeRead.substr(0, 1),
code: this.barcodeRead.substr(1),
}
}));
if(employeeScreenShowing) {
dispatch(updateEmployeeScreen));
}
};
}