React-ace: Can't get expect value when using Redux's dispatch

Created on 10 Jan 2016  ·  7Comments  ·  Source: securingsincity/react-ace

When using dispatch function in onChange function, will not get the expect value.

this.editor.value is null, so get nothing here.

Version: 3.0.0

Here is the demo:

import React from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import brace from 'brace';
import AceEditor from 'react-ace';

import 'brace/mode/sql';
import 'brace/mode/python';
import 'brace/theme/github';

// ActionCreators
export function onChangeAction(value) {
  // use `console.log(value)`  will not get the right expect value, an input print a letter.
  return {
    type: 'ON_CHANGE',
   text: value,
  }
};

// Editor Component
class Editor extends React.Component {
  constructor(props) {
    super(props);
  };

  render() {
    const { onChange } = this.props;
    return (
      <AceEditor
        mode="sql"
        theme="github"
        onChange={onChange}
        name="UNIQUE_ID_OF_DIV"
        width='100%'
        ref='editor'
        fontSize={15}
        editorProps={{$blockScrolling: true}}
      />
    );
  }
}


function mapDispatchToProps(dispatch) {
  return {onChange: bindActionCreators(onChangeAction, dispatch)};
};


connect(
  mapDispatchToProps
)(Editor)

// App
import { Provider } from 'react-redux';


class App extends React.Component {
  render() {
    const { store } = this.props;
    return (
      <Provider store={store}>
         <Editor />
      </Provider>
    );
  }
}

Most helpful comment

In my case, set state value to value option.

const TextArea = (props) => (
  <div className={styles.box}>
    <AceEditor
      mode="javascript"
      theme="solarized_light"
      onChange={props.onChange}
      name="RIGHT_INPUT"
      width="100%"
      height="100%"
      value={props.value}
      showPrintMargin={false}
      editorProps={{ $blockScrolling: true }}
    />
  </div>
);

All 7 comments

Doesn't work in this way:

import React from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import brace from 'brace';
import AceEditor from 'react-ace';

import 'brace/mode/sql';
import 'brace/mode/python';
import 'brace/theme/github';

// `onChangeAction` from ActionCreators
export function onChangeAction(text) {
  return {
    type: 'ON_CHANGE',
    statement: text,
  }
};


class Editor extends React.Component {
  constructor(props) {
    super(props);
  };
  onChange = (value) => {
    console.log(value);
    const { dispatch } = this.props;
    dispatch(onChangeAction(value));
  };
  render() {

    return (
      <AceEditor
        mode="sql"
        theme="github"
        onChange={this.onChange}
        name="UNIQUE_ID_OF_DIV"
        width='100%'
        ref='editor'
        fontSize={15}
        editorProps={{$blockScrolling: true}}
      />
    );
  }
}



connect(
  mapStateToProps,
  mapDispatchToProps
)(Editor)


class App extends React.Component {
  render() {
    const { store } = this.props;
    return (
      <Provider store={store}>
         <Editor  />
      </Provider>
    );
  }
}

@Yuanye

In your first example

connect(
  mapDispatchToProps
)(Editor)

should be

connect(
  null,
  mapDispatchToProps
)(Editor)

In your second example, you don't have a mapStateToProps and mapDispatchToProps function implement.

@chentsulin

Does not need 'mapDispatchToProps' in second example.

const mapStateToProps = (state) => {
  return {
    query: getQuery(state),
  }
};

I delete the componentWillReceiveProps function in https://github.com/securingsincity/react-ace/blob/master/src/ace.jsx, and it works.

If don't, it will call 'delete' action after call 'insert' . You can find it by console.log(nextProps) in componentWillReceiveProps function.

Sure, dispatch will be passed down as props as default.

I don't catch this. Where is the delete and insert actions?

@chentsulin I copied ace.jsx to my own project, and console.log(nextProps) in ReactAce.componentWillReceiveProps.

is somebody looking at it?
this is still an issue for me

In my case, set state value to value option.

const TextArea = (props) => (
  <div className={styles.box}>
    <AceEditor
      mode="javascript"
      theme="solarized_light"
      onChange={props.onChange}
      name="RIGHT_INPUT"
      width="100%"
      height="100%"
      value={props.value}
      showPrintMargin={false}
      editorProps={{ $blockScrolling: true }}
    />
  </div>
);
Was this page helpful?
0 / 5 - 0 ratings

Related issues

Jarmahent picture Jarmahent  ·  3Comments

danush picture danush  ·  7Comments

Bobcui001 picture Bobcui001  ·  5Comments

dmavrin picture dmavrin  ·  3Comments

henviso picture henviso  ·  7Comments