Question

我通过我的动作创建者传递数据时遇到的问题是Actions must be plain objects。基本上我是通过点击按钮来尝试捕获用户输入，而基于点击的按钮（视图） event.target.innerHTML被传递给动作创建者{{1然后，它通过axios执行GET请求，并根据选择的视图进行调度。

但是，我仍然对Redux感到陌生，而且我不确定我在这里做错了什么。我之前在动作创建者中看到了异步动作......

与Redux连接的组件：

fetchDataAsync(view)

基于class ViewSelector extends Component { selectView(event) { this.props.fetchDataAsync(event.target.innerHTML); } render() { return ( <nav> <button onClick={this.selectView.bind(this)}>VIEW ALL</button> <button onClick={this.selectView.bind(this)}>VIEW LAST WEEK</button> <button onClick={this.selectView.bind(this)}>VIEW LAST MONTH</button> </nav> ); } } function mapStateToProps(state) { return { view: state.view }; } export default connect(mapStateToProps, actions)(ViewSelector);调度的行动创建者：

event.target.innerHTML

任何建议表示赞赏。或者，如果您认为有更有效的方法来捕获用户输入并将其传递给动作创建者......我很想听到更多信息！

Answer 1

您需要安装redux-thunk才能使用异步操作。然后像这样创建您的商店

import thunk from 'redux-thunk';
const store = createStore(YOURREDUCER, applyMiddleware(thunk));

Answer 2

您拥有上述内容的一般想法是正确的。在React组件中，您希望隔离与async函数相关的信息，并使用该信息调用action-creator。动作创建者可以进行XHR调用，然后相应地调度动作。

（我假设您已经安装了中间件，否则请查看类似redux-thunk的内容以开始使用。在这种情况下，中间件有助于连接点，确保异步操作和结果得到适当的调度。） / p>

在不了解lastWeekData，lastMonthData等的情况下，我只建议简化“＆＃39;然后＆＃39;部分电话。如果有任何特殊逻辑，它通常属于reducer。

操作必须是React / Redux中的普通对象？

2 个答案: