Question

我在React-Redux上苦苦挣扎。我观看了Dan Abramovs关于redux的3次介绍，接着是其中的1次编码，阅读了Redux文档两次，并分别浏览了freeCodeCamp的React和Redux部分3次，但我似乎无法全神贯注它。我掌握了非常基本的知识，但是当它变得越来越复杂时，我就会迷路。我决定尝试构建markdown预览器挑战，以查看我是否可以边走边学，但在更新编辑器字段时无法更新预览字段。这就是到目前为止，我可以显示基本的HTML，例如“ This is the header”，一个文本框显示“ This is the editor”和类似的基本内容，但是现在我正在下一步获取编辑器字段以动态更新预览字段。我一开始尝试这样做，一切都变得一片空白，控制台也停止提供任何反馈。

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

我非常了解，知道我现在拥有的东西不起作用，但是我不知道为什么或如何解决它。我不太确定我应该如何使用我的减速器，这就是为什么它是空的。

Answer 1

您直接从onChange属性调用reducer。取而代之的是，您应该在商店中注册化简器，并在商店上分派一个动作，该操作又将使用化简器来更新商店中的状态。

您可能不想传递原始事件进行分派，但是类似的事情可能会起作用；

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

减速器注册；

const store = createStore(previewReducer);

现在要处理减速器中的操作；

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

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

但是很遗憾，您显然还不了解redux的工作原理，所以我建议您看一下更多入门教程。

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

1 个答案: