Draft-js: How to read editorState from redux store

[jqhercules]

Do you want to request a feature or report a bug?
N/A

What is the current behavior?
I'm using redux to set the initial editor state instead of directly having it inside the component. That way I can update the editor state anywhere I want within my app.

Currently, I have the following setup
My editor component

class MyEditor extends Component {
  constructor(props) {
    super(props);
    this.state = {
      editorState: EditorState.createWithContent(
        convertFromRaw(JSON.parse(this.props.textContent))
      ),
    }
  }

  render() {
    return (
      <Editor
        ref="editor"
        // editorState={this.props.editorState}
        editorState={this.state.editorState}
        onChange={this.onChange}
        onBlur={this.onShapeBlur}
      />
    )
  }
}

export default connect(mapStateToProps)(MyEditor);

The above code snipped work absolutely fine but if I try to use "this.props.editorState" as the state then the following error.

_editorState.getCurrentContent is not a function_

I've set up the initial store state similar to this person on StackOverflow

What is the expected behavior?
I expect the editor state to work just how it does if the state was directly being set within MyEditor component

Has anyone experience this issue if so could you tell me how you fixed it?

Which versions of Draft.js, and which browser / OS are affected by this issue? Did this work in previous versions of Draft.js?

Draft v0.10.5
Google Chrome Version 75.0.3770.90

Note
this.props.editorState looks exactly like what is being set for the component editorStart

Thanks for your time.

[jqhercules]

Are their no solid example of how to get editorstate to work with redux?

[mukeshsoni]

Can you provide a sample codesandbox example? editorState is a javascript object. There's no reason it will not work if it comes from redux store or local component state.

[thibaudcolas]

@jqhercules your code sample doesn’t include your mapStateToProps definition, or anything allowing us to see how you’ve set up your Redux store – so it’s hard to tell what could go wrong. In any case, this seems more like an issue with how you set up Redux than Draft.js, which shouldn’t care where the state comes from as long as it’s set.

[claudiopro]

Hi @jqhercules, as @mukeshsoni and @thibaudcolas pointed out, this question about usage of Draft.js in conjunction with Redux is missing essential information, and a reproducible example would help other community members to help you out.

Additionally, questions like yours would have more chances of being answered in a support forum like our Slack channel or StackOverflow.

Feel free to post an issue if you still see an incorrect behavior after verifying that the integration with Redux is correctly set up.

[jqhercules]

Hi @mukeshsoni @claudiopro Sorry for the late reply, noticed this was closed 19hr after posting! Anyway, I have prepared a codesandbox. You can find the editor within src/components/TextEditor.

Any help would be much appreciated.