[解決済み] react/reduxでbindActionCreatorsを使用するのはどんなときか?
2023-01-19 22:21:54
質問
再利用 のドキュメント bindActionCreators にはこう書かれています。
の唯一のユースケースは
bindActionCreators
を使うのは、Reduxを意識していないコンポーネントにアクションクリエータを渡したいときで、ディスパッチやReduxストアを渡したくはありません。
どのような例かというと
bindActionCreators
が使用される/必要とされる例は何でしょうか?
どのようなコンポーネントが Redux ?
両者のメリット/デメリットは何ですか?
//actionCreator
import * as actionCreators from './actionCreators'
function mapStateToProps(state) {
return {
posts: state.posts,
comments: state.comments
}
}
function mapDispatchToProps(dispatch) {
return bindActionCreators(actionCreators, dispatch)
}
対
function mapStateToProps(state) {
return {
posts: state.posts,
comments: state.comments
}
}
function mapDispatchToProps(dispatch) {
return {
someCallback: (postId, index) => {
dispatch({
type: 'REMOVE_COMMENT',
postId,
index
})
}
}
}
どのように解決するのですか?
最も一般的な回答が、実際にその質問に対応しているとは思えません。
以下のすべての例は本質的に同じことを行い、ノー"プリバインディング"の概念に従います。
// option 1
const mapDispatchToProps = (dispatch) => ({
action: () => dispatch(action())
})
// option 2
const mapDispatchToProps = (dispatch) => ({
action: bindActionCreators(action, dispatch)
})
// option 3
const mapDispatchToProps = {
action: action
}
オプション
#3
は単なるオプションの省略形です
#1
の省略形にすぎません。
#1
とオプション
#2
. react-reduxのコードベースでは両方が使われているのを見たことがありますが、どちらかというと混乱しやすいと思います。
私は、この混乱は、すべての
の例
で
react-redux
doc では
bindActionCreators
であるのに対し
bindActionCreators
(のドキュメントには、react-reduxで使用しないようにと書かれています。
答えはコードベースにおける一貫性だと思いますが、個人的にはアクションを明示的に ディスパッチ でラップすることを好みます。
関連
-
[解決済み】Reactコンポーネント内でswitchステートメントを使用するには?
-
[解決済み] React.createElement: type is invalid -- expected a string.
-
[解決済み] Webpack + Babelです。プリセット "es2015 "がディレクトリに相対して見つからなかった
-
[解決済み] React - 予想外のトークン、予想外の;
-
[解決済み] Cross-envでyarnの実行時にenv変数が変更されない。
-
[解決済み] Reactのrender()にFont Awesomeのアイコンを入れる方法
-
[解決済み] Reactルータを使ったプログラムによるナビゲーション
-
[解決済み] React JSX内のループ
-
[解決済み] Reduxのアクションをタイムアウトでディスパッチする方法とは?
-
[解決済み] Reduxの非同期フローになぜミドルウェアが必要なのか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】React - 式は1つの親要素を持つ必要がありますか?
-
[解決済み】<Router>の外側で<Link>を使用してはならない
-
[解決済み】Typescript react - モジュール ''react-materialize'' の宣言ファイルが見つかりませんでした。'path/to/module-name.js' は暗黙のうちに any 型を持ちます。
-
[解決済み] MUI Boxは何のためのコンポーネントですか?
-
[解決済み] Angular 2の*ngForのReactでの同等品
-
[解決済み] react.jsでng-ifに相当するものは何ですか?
-
[解決済み] ReactJS - SCRIPT1010: 期待される識別子 - IE11 で本番ビルドが実行されない
-
[解決済み] プロップ `history` は `Router` で必須とマークされているが、その値は `undefined` である。
-
[解決済み] componentWillReceivePropsライフサイクルメソッドはいつ使用するのですか?
-
[解決済み] React QueryとReduxの主な違いは何ですか?