SlateJS + redux

Question

I want to store a SlateJS editor's value stored in redux instead of in state, but I when I change the hasLinks method, I immediately receive a crash stating:

TypeError: Cannot read property 'inlines' of undefined

Editor's hasLinks Method

hasLinks = () => {
    // const { value } = this.state // Original
    const { value } = this.props // Update for redux
    // Alternative attempts
    // const { value }  = this.props.editorValue
    // const  value  = this.props.editorValue
    // const { value }  = this.props.editorValue
    // const value  = Object.assign({}, this.props.editorValue)
    // const value  = Value.fromJSON(Object.assign({}, this.props.editorValue))
    return value.inlines.some(inline => inline.type == 'link') // Crashes on this line
    // return value && value.inlines && value.inlines.some(inline => inline.type == 'link') // Alternative attempt that avoids initial crash, but creates a memory overload when editor is accessed much
}

Redux Store

const initialState = {
    editorValue: Value.fromJSON(initialValue),
}

Initial State

{
    "document": {
        "nodes": [{
                "object": "block",
                "type": "paragraph",
                "nodes": [{
                    "object": "text",
                    "leaves": [{
                        "text": "By default, pasting content into a Slate editor will use the content's plain text representation. This is fine for some use cases, but sometimes you want to actually be able to paste in content and have it parsed into blocks and links and things. To do this, you need to add a parser that triggers on paste. This is an example of doing exactly that!"
                    }]
                }]
            },
            {
                "object": "block",
                "type": "paragraph",
                "nodes": [{
                    "object": "text",
                    "leaves": [{
                        "text": "Try it out for yourself! Copy and paste some rendered HTML content (not the source code) from another site into this editor."
                    }]
                }]
            }
        ]
    }
}

Can anyone help me understand why this is not working and what I can do to update to resolve it?

Answer 1

This is over a year old, but the problem is that const { value } = this.props requires that props has a property called value. Yours looks like editorValue. It's a common gotcha that object destructuring only works (in this most minimal form) with the same property name (i.e. you can't reassign something with a different name).