Javascript js-如何使用语法检查功能创建平滑的实时编辑器？

我试图制作一个具有实时语法检查功能的富文本编辑器。 我有自己的字典和检查引擎

这里的问题是编辑器并不平滑，因为每次我对draft.js编辑器进行更改时都会运行检查引擎，即使我只是移动光标位置

这是我的RichTextEditor组件

import {updateEditorState, checkEditorState} from './logic/actions';
...
class RichTextEditor extends React.Component {

    ...
    onChange = (editorState) => {
        this.props.updateEditorState(editorState);
        this.props.checkEditorState(editorState);
    }
    ...
    render() {
        return (<Editor
                        editorState={this.props.editorState}
                        onChange={this.onChange}
                    />);
    }
}

const mapStateToProps = state => ({
});

const mapDispatchToProps = dispatch => ({
    updateEditorState: bindActionCreators(updateEditorState, dispatch),
    checkEditorState: bindActionCreators(checkEditorState, dispatch)
});

export default connect(mapStateToProps, mapDispatchToProps)(RichTextEditor);

逻辑/saga.js

逻辑/reducer.js

我知道这个实现不是一个好的实践，因为在redux操作成功调度之前，UI将被阻止，这是非平滑编辑的主要原因。 我想做一个后台线程来检测存储变量“editorState”的变化。 一旦检测到更改，它将运行checkEngine，然后发送新的redux操作，以使用语法检查的editorState更新editorState

但我不知道如何在React.js中为redux商店创建背景线程或工作线程 你能帮我解决这个问题吗？ 谢谢

import * as actionTypes from './rteActionTypes'
...
export const updateEditorState = (data) => {
    return ({
        type: actionTypes.UPDATE_EDITOR_STATE,
        data: data
    });
}

export const checkEditorState = (data) => {
    return ({
        type: actionTypes.CHECK_EDITOR_STATE,
        data: data
    });
}
...

import { takeLatest, all, call, put } from 'redux-saga/effects';
import * as actionTypes from './rteActionTypes';

import { checkEditorState } from './CheckEngine';

function* checkEditor(action) {
    const {updated, editorState} = yield call(checkEditorState, action.data)
    if (updated) {
        yield put({ type: actionTypes.UPDATE_EDITOR_STATE, data: editorState })
    }
}

export default function* saga() {
    yield all([
        takeLatest(actionTypes.CHECK_EDITOR_STATE, checkEditor)
    ]);
}

import * as actionTypes from './rteActionTypes';
import {
    EditorState,
    CompositeDecorator,
    convertFromRaw
} from 'draft-js';
const initialState = {
    editorState: EditorState.createEmpty(decorator),
};
export default (state = initialState, action) => {
    switch (action.type) {
        case actionTypes.UPDATE_EDITOR_STATE:
            return {
                ...state,
                editorState: action.data
            };
    ...
    }
}