javascript - 我正在尝试在 codepen 中构建一个 React-Redux 'Markdown Previewer'，但是我在弄清楚应该做什么时遇到了很多麻烦

Question

我在使用 React-Redux 时遇到了一些困难。我看了 3 遍 Dan Abramovs 对 redux 的介绍，接着是那些时候的编码 1，阅读了 Redux 文档两次，并分别浏览了 freeCodeCamp 的 React 和 Redux 部分 3 遍，但我似乎无法全神贯注它。我掌握了最基本的知识，但是当它开始变得越来越复杂时，我就迷路了。我决定尝试构建 Markdown 预览器挑战，看看我是否可以边学边学，但我无法在更新编辑器字段时更新预览字段。这是我到目前为止所拥有的，我可以让它显示基本的 HTML，比如“这是标题”，一个文本框，上面写着“这是编辑器”和类似的基本内容，但现在下一步我正在努力正在让编辑器字段动态更新预览字段。当我开始尝试这样做时，一切都变成了空白，控制台也不再给我任何反馈。

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

我很清楚我现在拥有的东西不应该工作，但我不知道为什么或如何解决它。我不太确定我应该用我的 reducer 做什么，这就是为什么它是空的。

Answer 1

您直接从 onChange 属性调用缩减器。相反，您应该在 store 中注册 reducer，并在 store 上发送一个 action，这反过来将使用 reducer 来更新 store 中的状态。

您可能不想将原始事件传递给分派(dispatch)，但像这样的事情可能会起作用；

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

reducer 注册；

const store = createStore(previewReducer);

现在要处理 reducer 中的 Action ；

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

在此之后，您必须“连接”需要使用此源的组件。

但很抱歉，您显然还不了解 redux 的工作原理，因此我建议您查看更多入门教程。