私はフロントエンドでreact + reduxで働いていました。我々はすべてのReduxのlogic.Praticallyホスティング事業を担当してコンテナコンポーネントを作成することを知っているようReact + Redux +サンクでビジネスロジックを整理する方法
、我々は我々が取得するためにイベントを送出することができますmapDispatchToPropsでespetially、mapStateToPropsとコネクト機能についてmapDispatchToPropsを提供しますレデューサーは大きく働いています。
多くの種類のタイプを持ち、それぞれが10ステップ以上あるので、「次のステップ」、「前のステップ」コマンドを構成し、検証のような子要素の関数を呼び出すこれらのボタンをクリックします。しかし、私は "ref"は推奨された方法ではないと思います。しかし再来のオリジナルデザインで、私は次のコードでイベントを送出しなければならない
const mapDispatchToProps = (dispatch, ownProps) => ({
onNext:() => {
dispatch(nextStep());
}
}
どこでReduxのデザインの子コントロールの検証問題があるが、呼び出す方法、多分私達は、アクションの作成者でそれを処理する必要がありますが、私はそれがasyn要求または単に普通のオブジェクトを持つアクションだと思う、それはロジックを処理すべきではない。
だから私は以下のように子コンテナ内のコントローラを公開：
export {
childContainer,
childNavController
};
検証機能を公開するために、childNavControllerを子要素とロジックをレンダリングするために使用される子コンテナを。しかし、このように我々はディスパッチオブジェクトへのアクセスを持っていないので、私は以下のことを実行します。私はまた、これは理にかなっての方法です
const nextStep=(childCreator)=>{
return function (dispatch, getState) {
return Promise.resolve().then(()=>{
const currentState = getState();
const controller=childCreator(currentState.step);
// this make the business also can work with dispatch object
controller.validation(dispatch,getState);
});
}
}
、しかし：アクションクリエータファイルで
const mapDispatchToProps = (dispatch, ownProps) => ({
onNext:() => {
dispatch(nextStep(wizardCreator));
}
}
const wizardCreator= (step) => {
// according to the step reuturn different controller instance
return childNavController;
};
それは奇妙な、OO、いいえ、エレガントなデザイン、ちょうどそれを得るために思った。
このシナリオのための提案や設計がある場合は、