question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Can't get expect value when using Redux's dispatch

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 8 years ago
  • Comments:7

github_iconTop GitHub Comments

5reactions
romiogakucommented, Nov 3, 2016

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>
);
0reactions
venil7commented, Jun 28, 2016

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Redux useSelect doesn't get updated as expected
I'm working on a little proof of concept project, using React and Redux, and useSelector and useDispatch hooks. I'm trying to fetch some...
Read more >
testing async store.dispatch · Issue #546 · reduxjs/redux
Maybe I'm overlooking something but I'm finding it impossible to test store.dispatch with an async action without a hacky timer solution.
Read more >
Store
Redux doesn't have a Dispatcher or support many stores. ... It is equal to the last value returned by the store's reducer.
Read more >
Hooks FAQ
You can't use Hooks inside a class component, but you can definitely mix ... React Redux since v7.1.0 supports Hooks API and exposes...
Read more >
Async operations using redux-saga
First, call a function called getUser, and assign the result to the const user. · Later, dispatch an action called FETCH_USER_SUCCESS and pass...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found