React-ace: Redux의 디스패치를 ​​사용할 때 값을 기대할 수 없습니다.

다음과 같은 방식으로 작동하지 않습니다.

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>
    );
  }
}

@원예

첫 번째 예에서

connect(
  mapDispatchToProps
)(Editor)

해야한다

connect(
  null,
  mapDispatchToProps
)(Editor)

두 번째 예에서는 mapStateToProps 및 mapDispatchToProps 함수 구현이 없습니다.

@chentsulin

두 번째 예에서는 'mapDispatchToProps'가 필요하지 않습니다.

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

나는 삭제 componentWillReceiveProps 함수 https://github.com/securingsincity/react-ace/blob/master/src/ace.jsx , 그리고 그것을 작동합니다.

그렇지 않으면 'insert' 호출 후 'delete' 작업을 호출합니다. componentWillReceiveProps 함수의 console.log(nextProps)에서 찾을 수 있습니다.

물론 디스패치는 기본적으로 소품으로 전달됩니다.

나는 이것을 잡지 못한다. delete 및 insert 작업은 어디에 있습니까?

@chentsulin ace.jsx 를 내 프로젝트에 복사하고 ReactAce.componentWillReceiveProps의 console.log(nextProps)를 복사했습니다.

누군가 그것을보고 있습니까?
이것은 여전히 ​​나에게 문제입니다

제 경우에는 상태 값을 value 옵션으로 설정합니다.

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>
);