0

最初の API ミドルウェアを作成したばかりで、複数のアクションをディスパッチするアクション クリエーターのプロミスをチェーンする場所を考えていました。私がやったことはアンチパターンです:

export const fetchChuck = () => {
  return {
    [CALL_API]: {
      types: [ CHUCK_REQUEST, CHUCK_SUCCESS, CHUCK_FAILURE ],
      endpoint: `jokes/random`
    }
  }
}

export const saveJoke = (joke) => {
  return { type: SAVE_JOKE, joke: joke }
}

export const fetchAndSaveJoke = () => {
  return dispatch => {
    dispatch(fetchChuck()).then((response) => {
      dispatch(saveJoke(response.response.value.joke))
    })
  }
}

fetchAndSaveJoke は、react コンポーネントでセクション アクションをディスパッチする必要がありますか、それとも独自のアクション クリエーターとして使用しても問題ありませんか?

4

1 に答える 1

1

Redux の世界のこの時点では、ベスト プラクティスとは何か、アンチパターンとは何かが明確ではありません。これは非常に野心的なツールです。多様なエコシステムが繁栄するのは素晴らしいことですが、落とし穴や過度のボイラープレートに遭遇することなくアプリを整理する方法を探している人々にとっては課題となります。私が知る限り、あなたのアプローチは Redux ガイドのアドバイスとほぼ一致しているようです。私にとっておかしいと思うことの 1 つは、CHUCK_SUCCESSおそらくSAVE_JOKE不要にすべきであるように思われることです。

個人的には、アクションの作成者がより多くのアクションをディスパッチするのはかなり厄介だと思うので、react-redux-controller の背後にあるアプローチを考え出しました。これはまったく新しいものなので、「ベスト プラクティス」とは言えませんが、あなたや他の誰かが試してみたいと思った場合に備えて、公開します。そのワークフローでは、次のようなコントローラー メソッドがあります。

// actions/index.js

export const CHUCK_REQUEST = 'CHUCK_REQUEST';
export const CHUCK_SUCCESS = 'CHUCK_SUCCESS';
export const CHUCK_FAILURE = 'CHUCK_FAILURE';

export const chuckRequest = () => { type: CHUCK_REQUEST };
export const chuckSuccess = (joke) => { type: CHUCK_SUCCESS, joke };
export const chuckFailure = (err) => { type: CHUCK_FAILURE, err };

// controllers/index.js
import fetch from 'isomorphic-fetch'; // or whatever
import * as actions from '../actions';

const controllerGenerators = {
  // ... other controller methods
  *fetchAndSaveJoke() {
    const { dispatch } = yield getProps;

    // Trigger a reducer to set a loading state in your store, which the UI can key off of
    dispatch(actions.chuckRequest());

    try {
      const response = yield fetch('jokes/random');
      dispatch(actions.chuckSuccess(response.response.value.joke));
    } catch(err) {
      dispatch(actions.chuckFailure(err));
    }
  },
};
于 2016-01-02T06:01:14.397 に答える