动作必须是 React/Redux 中的普通对象？答案

【问题标题】：Actions must be plain Objects in React/Redux?动作必须是 React/Redux 中的普通对象？
【发布时间】：2016-09-26 00:27:33
【问题描述】：

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

不过，我还是 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));
    });
  };

}

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

【问题讨论】：

标签： javascript reactjs redux axios

【解决方案1】：

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

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

【讨论】：

好的，所以我已经实现了 redux-thunk，但是如果我尝试使用 thunk 运行的动作创建者有一个需要传递的参数怎么办？在这种情况下视图。我目前拥有的东西不起作用：store.dispatch(fetchDataAsync(view));
实现了 redux-thunk，你应该能够进行异步调用。您的代码可能还有其他问题。错误信息是什么？您是否尝试过调试以查看操作是否被触发？
想通了。我已经在另一个文件中有一个createStore 并忘记了它。谢谢！
还可以查看 redux-saga 和 redux-observable 项目。两者都可以用作 redux-thunk 的替代品，IMO 给你更多的灵活性
导入其他类似的东西 - import {createStore, applyMiddleware} from "redux";

【解决方案2】：

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

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

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

【讨论】：