Я использую оболочку response-draft-wysiwyg для Draft.js. На странице у меня есть несколько экземпляров компонента Editor. У меня проблема с медленным / медленным обновлением пользовательского интерфейса редактора (обработчик событий onChange
). Может быть, это какой-то намек. Я получаю много предупреждений в консоли [Violation] 'input' handler took <N>msA
.
Моя установка:
- реагировать-шаблон
- реагировать-черновик-wysiwyg
- редукция
- редукс-сага
- повторно выбрать
Я отправляю действие для обработки изменения состояния редактора, которое обрабатывается redux-saga. Saga проверит наличие нового контента и обновит магазин.
export function* handleOnEditorStateChange({ editorState, nameSpace }) {
const actualEditorState = yield select(selectAllEditorsContent());
const editorIndexToUpdate = actualEditorState.findIndex(
editors => editors.name === nameSpace,
);
const currentContent = actualEditorState[
editorIndexToUpdate
].state.getCurrentContent();
const newContent = editorState.getCurrentContent();
const hasEditorNewContent = newContent !== currentContent;
if (hasEditorNewContent) {
const updatedEditorState = [...actualEditorState];
updatedEditorState[editorIndexToUpdate].state = editorState;
yield put(storeEditorStateAction(updatedEditorState));
}
}
Мое состояние редукции выглядит так:
...
editors: [
{
name: 'editor1',
label: 'Editor 1',
state: {... _immutable - draftjs }
},
{
name: 'editor2',
label: 'Editor 2',
state: {... _immutable - draftjs }
},
]
...
Редуктор:
...
case STORE_EDITOR_STATE: {
const { content } = action;
return state.set('editors', content);
}
...