我正在尝试在Codepen中构建一个React-Redux'Markdown Previewer'，但是在弄清楚应该做什么方面有很多麻烦

Question

I'm struggling quite a bit with React-Redux. I watched Dan Abramovs intro to redux 3 times, followed along with the coding 1 of those times, read the Redux documentation twice, and went through the React and Redux sections of freeCodeCamp 3 times each but I can't seem to wrap my head around it. I get the very basics, but when it starts to get more complicated I get lost. I decided to try and build out the markdown previewer challenge to see if I could learn as I go, but I can't get the preview field to update as I update the editor field. This is what I have so far, I could get it to display basic HTML like "This is the header" a text box that says "This is the editor" and basic stuff like that, but now the next step I'm working on is getting the editor field to dynamically update the preview field. As soon as I started trying to do that, everything went blank and the console stopped giving me any feedback.

const { Component } = React;
const { Provider, connect } = ReactRedux;


const previewReducer = (
  state='DEFAULT_STATE',
  action
) = {

};

const Header = () => (
  <p> This is the header </p>
);

const Editor = () => (
  <textarea id='editor' value={this.props.data.value}
    onChange={event => previewReducer(event)} />
);

const Previewer = () => (
  <p id='preview'> This is the Previewer </p>
);

const Footer = () => (
  <p> This is the Footer </p>
);

const MarkDownApp = () => (
  <div>
    <Header />
    <Editor />
    <Previewer />
    <Footer />
  </div>
);

const { createStore } = Redux;

ReactDOM.render(
  <Provider store={createStore(markDownApp)}>
    <MarkDownApp />
  </Provider>,
  document.getElementById('root')
);

I understand well enough to know that what I have right now shouldn't work, but I don't know why or how to fix it. I'm not really sure what I should be doing with my reducer which is why it's empty.

Answer 1

You're calling the reducer directly from your onChange property. Instead you should register the reducer in the store, and dispatch an action on the store, that in turn will use the reducer to update the state in the store.

You probably do not want to pass a raw event to dispatch, but something like this could work;

onChange={event => store.dispatch({ type: 'SOURCE_CHANGED', event: event })}

Reducer registration;

const store = createStore(previewReducer);

And now to handle the action in the reducer;

const previewReducer = (state = {}, action) => {
  if (action.type === 'SOURCE_CHANGED') {
    return { source: action.event.target.value };
  }
  return state;
}

And after this, you have to "connect" the components that need to use this source.

But I'm sorry to say that you apparently do not yet understand how redux works, so I recommend you to have a look at the more introductory tutorials.