动作必须是 React/Redux 中的纯对象？

Question

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

不过，我对 Redux 还是个新手，我不确定自己做错了什么。我以前见过在 action creator 中执行的异步操作...

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

}

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

Answer 1

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

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

Answer 2

你上面的总体思路是正确的。在 React 组件中，您希望隔离与异步函数相关的信息，并使用该信息调用 action-creator。动作创建者可以进行 XHR 调用，然后相应地分派动作。

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

在不太了解 lastWeekData、lastMonthData 等的情况下，我只建议尽可能简化调用的 'then' 部分。如果有什么特殊的逻辑，按惯例是属于reducer的。

动作必须是 React/Redux 中的纯对象？

Actions must be plain Objects in React/Redux?

javascript

reactjs

redux

axios