我Actions must be plain objects
遇到的问题是通过我的动作创建者传递数据时。基本上我通过点击按钮试图捕获用户输入,并且基于什么按钮(视图)被点击的event.target.innerHTML
被传递给动作的创建者fetchDataAsync(view)
,其然后执行通过基于被选择什么视图Axios公司和分派的GET请求。
不过,我还是 Redux 的新手,我不确定我在这里做错了什么。我之前见过在动作创建者内部执行的异步动作......
与 Redux 连接的组件:
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
:
export function fetchDataAsync(view) {
return dispatch => {
dispatch(fetchData());
axios.get(DATA_URL)
.then(res => {
dispatch(fetchDataSuccess(res.data));
if (view == 'VIEW LAST WEEK') {
dispatch(lastWeekData(res.data));
} else if (view == 'VIEW LAST MONTH') {
dispatch(lastMonthData(res.data));
}
}).catch(err => {
dispatch(fetchDataFailure(err));
});
};
}
任何建议表示赞赏。或者,如果您认为有一种更有效的方法可以捕获用户输入并将其传递给动作创建者……我很想知道更多!