0

我遇到的问题是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));
    });
  };

}

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

4

2 回答 2

3

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

import thunk from 'redux-thunk';
const store = createStore(YOURREDUCER, applyMiddleware(thunk));
于 2016-09-26T00:35:08.110 回答
1

你上面的一般想法是正确的。在 React 组件中，您希望隔离与异步函数相关的信息并使用该信息调用操作创建者。动作创建者可以进行 XHR 调用，然后相应地调度动作。

（我假设您已经安装了中间件，否则请看一些类似redux-thunk开始的东西。在这种情况下，中间件有助于连接点，确保异步操作和结果被适当地分派）。

在不太了解lastWeekData,lastMonthData等的情况下，我只建议可能简化呼叫的“then”部分。如果有什么特殊的逻辑，按惯例属于reducer。

于 2016-09-26T00:36:32.047 回答