Multiple Slate.js editors / prevent redux from re-rendering parent component

Question

I am trying to add multiple Slate.js text editor fields into one page. So far my main component contains a button which when clicked appends a slate value to an array slateValues in my redux store. In the render function I then map over that array and for each entry return a SlateEditor component which essentially renders the standard Slate Editor component with some custom formatting/functionality.

My problem is that Slate uses an onChange function to process changes to the value. Handling those changes in the local state works fine, but how can I pass that into the redux store? Updating the redux store directly in the onChange causes the parent component to re-render which then ends up in an endless loop (I assume this then triggers the onChange again, which triggers a re-render etc.).

I initially passed down the values as props into the SlateEditor component, then tried to directly read the value in the child component (SlateEditor) from the redux store.

My final aim is to store the slateValues as a "block" in a database. Any ideas on how to fix this? Thanks

Answer 1

I had similar issue. What I did was I did not map over the array of slate values. Instead I had another array of (my case) editorsNamespaces=[....] also I pass to the Slate editor wrapper component a selector (ie: selectSlateValueByEditorByNamespace) and a onChangeHandler(newValue, nameSpace). By doing that my parent component will not re-render all editor because editorsNamespaces array will never change, and only particular editor will re-render when value has changed.