动作必须是 React/Redux 中的普通对象吗?

IT技术 javascript reactjs redux axios
2021-05-08 05:51:24

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

}

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

2个回答

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

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

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

(我假设您已经安装了中间件,否则请查看类似redux-thunk入门的内容。在这种情况下,中间件有助于连接点,确保适当地分派异步操作和结果)。

没有太多了解的lastWeekDatalastMonthData等等,我只建议有可能简化呼叫“然后”的一部分。如果有什么特殊的逻辑,按惯例属于reducer。