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 コンポーネントでは、非同期関数に関連する情報を分離し、その情報を使用して action-creator を呼び出します。アクション作成者は XHR 呼び出しを行い、それに応じてアクションをディスパッチできます。

(ミドルウェアがインストールされていることを前提としています。それ以外の場合は、redux-thunk開始するようなものを確認してください。ミドルウェアは、この場合、ドットを接続するのに役立ち、非同期アクションと結果が適切にディスパッチされるようにします)。

lastWeekData、などについてあまり知らずlastMonthDataに、呼び出しの「then」部分を単純化することをお勧めします。特別なロジックがある場合、従来はレデューサーに属していました。

于 2016-09-26T00:36:32.047 に答える