Why is the state not filled after input?

Question

React

I have created a page that has a textarea input field.

function Page1() {
  function handleChange(e) {
    store.dispatch({ type: 'CHANGE_VALUE', appText: e.target.value });
  }

  return (
    <div>
        <textarea 
          value={store.getState().appReducer.newAppText} 
          onChange={handleChange}>
        </textarea>
        <button>send</button>
        <div id="output"></div>
    </div>
  );
}

Installed redux, created a store and a single reducer, appReducer.

let reducers = combineReducers({
    appReducer
});

const store = createStore(reducers);

export default store;

store.subscribe(v => {
    console.log(store.getState())
});

// store.dispatch({ type: 'CHANGE_VALUE', appText: 222 });

window.state = store.getState()

As you can see, everything is pretty standard and simple. But this simple code does not work, it is expressed in the fact that after I enter the characters in the textarea, these characters do not fall into the store.

I check it in the following way:
1. I open the browser console
2. I enter the state
3. I press enter

As a result, I see that the state is empty.

But if I remove the comment from the line in the above code

// store.dispatch({ type: 'CHANGE_VALUE', appText: 222 });

, then the store is filled. Please help me understand how to fill the store after I fill the textarea

LIVE DEMO

Answer 1

window.state = store.getState()<-- contains the result of the function,
replace with:
window.state = store.getState<-- contains a reference to the function
now you have an window.stateObject in it and does not change anywhere else