React Redux sync action returns some Proxy object instead of string

Question

I have an input with currentAnswer:

    <input
      value={props.currentAnswer}
      onChange={(text) => dispatch(onChangeAnswer(text))}
    />

Which calls function onChangeAnswer:

export function onChangeAnswer(text) {
  console.log(text);
  return { type: ON_CHANGE_ANSWER, data: text };
}

Reducer:

export default function reduce(state = initialState, action) {
  switch (action.type) {
  case ON_CHANGE_ANSWER:
    return assign({}, state, {
      currentAnswer: action.data
    });

Async actions works good, but when I change text in the input I see next object in console:

{type: "ON_CHANGE_ANSWER", data: Proxy}
  data: Proxy {dispatchConfig: null, _targetInst: null, …}
  type: "ON_CHANGE_ANSWER"

So, I want data will be entered in field text.

Should I dispatch it somehow? I obviously have a lack of understanding how all this works.

Answer 1

The proxy you are getting is React SyntheticEvent which makes event behave the same across browsers. You need to access the value from target which is original HTML Element:

<input
  value={props.currentAnswer}
  onChange={(event) => dispatch(onChangeAnswer(event.target.value))}
/>

Btw - events get nullified for performance reasons - so you can't actually pass event do redux.