javascript - Actions 必须是 React/Redux 中的普通对象吗？

Question

我遇到的问题是通过 Action 创建者传递数据时 Action 必须是普通对象。基本上我试图通过单击按钮来捕获用户输入，并且根据单击的按钮( View )将event.target.innerHTML传递给操作创建者 fetchDataAsync(view) 然后通过 axios 执行 GET 请求并根据选择的 View 进行调度。

不过，我对 Redux 还很陌生，我不确定我在这里做错了什么。我之前见过在 Action 创建器内执行异步 Action ...

与 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进行调度的 Action 创建者:

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

}

如有任何建议，我们将不胜感激。或者，如果您认为有一种更有效的方法来捕获用户输入并将其传递给操作创建者......我很想听听更多信息!

Answer 1

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

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