How to use the @nteract/commutable.fromJS function in @nteract/commutable

// The listing is all these contents in aggregate
                    items: sorted
                  }),
                  filepath: fetchContentFulfilledAction.payload.filepath,
                  lastSaved:
                    fetchContentFulfilledAction.payload.model.last_modified,
                  created: fetchContentFulfilledAction.payload.model.created,
                  loading: false,
                  saving: false,
                  error: null
                })
              )
          );
        }
        case "notebook": {
          const immutableNotebook = fromJS(
            fetchContentFulfilledAction.payload.model.content
          );

          return state.set(
            fetchContentFulfilledAction.payload.contentRef,
            makeNotebookContentRecord({
              created: fetchContentFulfilledAction.payload.created,
              lastSaved: fetchContentFulfilledAction.payload.lastSaved,
              filepath: fetchContentFulfilledAction.payload.filepath,
              model: makeDocumentRecord({
                notebook: immutableNotebook,
                savedNotebook: immutableNotebook,
                transient: Map({
                  keyPathsForDisplays: Map(),
                  cellMap: Map()
                }),

constructor(props: Props) {
    super(props);

    this.state = {
      notebook: fromJS(props.notebook)
    };
  }

componentWillReceiveProps(nextProps: Props) {
    if (nextProps.notebook !== this.props.notebook) {
      this.setState({ notebook: fromJS(nextProps.notebook) });
    }
  }

"source":["## The Notable Nteract Notebook\\n","\\n","**It\'s a notebook!**\\n"]},\
{"cell_type":"code","execution_count":11,"metadata":{"collapsed":false},\
"outputs":[{"data":{"text/plain":["<h1>Multiple</h1>"],\
"text/plain":[""]},"metadata":{},"output_type":"display_data"}],\
"source":["import IPython\\n","\\n","from IPython.display import HTML\\n",\
"from IPython.display import Markdown\\n","from IPython.display import display\\n","\\n",\
"display(HTML(\'<h1>Multiple</h1>\'))\\n","display(HTML(\'<p>Display Elements</p>\'))\\n",\
"display(Markdown(\'**awesome**\'))\\n","\\n","print(\'hey\')\\n","42"]}],\
"metadata":{"kernelspec":{"display_name":"Python 3","language":"python","name":"python3"},\
"language_info":{"codemirror_mode":{"name":"ipython","version":3},"file_extension":".py",\
"mimetype":"text/x-python","name":"python","nbconvert_exporter":"python",\
"pygments_lexer":"ipython3","version":"3.5.1"}},"nbformat":4,"nbformat_minor":0}';

export const dummyJSON = JSON.parse(dummy);

export const dummyCommutable = fromJS(dummyJSON);

export const bigDummyJSON = {
  cells: [
    {
      cell_type: "markdown",
      source: [
        "# This is an example notebook\n",
        "\n",
        "## Used for test purposes...\n",
        "\nThe idea is to have enough real data in here to make a non-trivial NB."
      ],
      metadata: {
        trusted: false
      }
    },
    {

version: "3.6.0",
      mimetype: "text/x-python",
      codemirror_mode: {
        name: "ipython",
        version: 3
      },
      pygments_lexer: "ipython3",
      nbconvert_exporter: "python",
      file_extension: ".py"
    }
  },
  nbformat: 4,
  nbformat_minor: 2
};

export const bigDummyCommutable = fromJS(bigDummyJSON);

export const bigDummy = JSON.stringify(bigDummyJSON);

map(action => ({
      type: "SET_NOTEBOOK",
      filename: action.payload.name,
      notebook: fromJS(action.payload.content)
    })),
    catchError((xhrError: any) =>

"source":["## The Notable Nteract Notebook\\n","\\n","**It\'s a notebook!**\\n"]},\
{"cell_type":"code","execution_count":11,"metadata":{"collapsed":false},\
"outputs":[{"data":{"text/plain":["<h1>Multiple</h1>"],\
"text/plain":[""]},"metadata":{},"output_type":"display_data"}],\
"source":["import IPython\\n","\\n","from IPython.display import HTML\\n",\
"from IPython.display import Markdown\\n","from IPython.display import display\\n","\\n",\
"display(HTML(\'<h1>Multiple</h1>\'))\\n","display(HTML(\'<p>Display Elements</p>\'))\\n",\
"display(Markdown(\'**awesome**\'))\\n","\\n","print(\'hey\')\\n","42"]}],\
"metadata":{"kernelspec":{"display_name":"Python 3","language":"python","name":"python3"},\
"language_info":{"codemirror_mode":{"name":"ipython","version":3},"file_extension":".py",\
"mimetype":"text/x-python","name":"python","nbconvert_exporter":"python",\
"pygments_lexer":"ipython3","version":"3.5.1"}},"nbformat":4,"nbformat_minor":0}';

export const dummyJSON = JSON.parse(dummy);

export const dummyCommutable = fromJS(dummyJSON);

export const bigDummyJSON: Notebook = {
  cells: [
    {
      cell_type: "markdown",
      source: [
        "# This is an example notebook\n",
        "\n",
        "## Used for test purposes...\n",
        "\nThe idea is to have enough real data in here to make a non-trivial NB."
      ],
      metadata: {
        trusted: false
      }
    },
    {

componentWillReceiveProps(nextProps: Props) {
    if (nextProps.notebook !== this.props.notebook) {
      this.setState({ notebook: fromJS(nextProps.notebook) });
    }
  }

constructor(props: Props) {
    super(props);

    this.state = {
      notebook: fromJS(props.notebook)
    };
  }

constructor(props: Props) {
    super(props);

    this.state = {
      notebook: fromJS(props.notebook)
    };
  }