Reduxのストアサービスは、React Appのさまざまなコンポーネントによって最終的に利用されています。それによって公開されるメソッド(dispatch、getState、subscribeなど)は、すべての種類のコンポーネント(コンテナまたはプレゼンテーションなど)で使用されます。ReactでRedux - コンポーネントとストアを共有する正しい方法
このストアサービスを回避するアプローチは、重要な設計上の決定だと思います。 2つの方法があります:
1)すべてのネストされたレベルのすべてのコンポーネントにストアを渡します。これは推奨されたものではありません。
2)react-reduxのようなツールを使用して、コンテキストの助けを借りて、必要な場所であればいつでもストア(状態とディスパッチが正確になります)を利用できます。
私の質問は次のとおりです。必要な場所に店舗をインポートするだけではいかがですか。 SPAベースのReact Appの場合、ストアはシングルトンになります。任意のレベルでネストされたコンポーネントは、単にストアをインポートできます。上記の2つのアプローチのいずれかを採用するのはなぜですか?ネストされたレベルのコンポーネントの
:私たちは、あなたがの異なる部分からのデータを管理する第2 MyComponentのを、持っているときに何が起こるかを考えてみましょう。この
import store from "path/to/store";
let MyComponent =() => {
let state = store.getState();
return (
<div onClick={() => {
store.dispatch({
type: "SOME_EVENT",
payload: store.somedata
});
}}>{state.dataINeedHere}</div>
);
};
export default MyComponent;
代わり
import { connect } from "react-redux";
let MyComponent = ({somedata, onMyAction}) => {
let state = store.getState();
return (
<div onClick={() => {
onMyAction(somedata);
}}>{somedata}</div>
);
};
const mapStateToProps = (state) => {
return {
somedata: state.somedata
}
}
const mapDispatchToProps = (dispatch) => {
return {
onMyAction: (input) => {
dispatch({
type: "SOME_EVENT",
payload: input
});
}
}
}
export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);
「あなたはこれを行うことができますか」の例では、状態の変化によってコンポーネントが再レンダリングされる原因は何ですか? – azium
トップレベルの状態変更を購読して再レンダリングを起動します – Vijey
mobx/mobx-reactを調べましたか?あなたが描いているもののように聞こえます。 – azium